<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="product" content="Metro UI CSS Framework">
    <meta name="description" content="Simple responsive css framework">
    <meta name="author" content="Sergey S. Pimenov, Ukraine, Kiev">

    <link href="css/metro-bootstrap.css" rel="stylesheet">
    <link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
    <link href="css/docs.css" rel="stylesheet">
    <link href="js/prettify/prettify.css" rel="stylesheet">

    <!-- Load JavaScript Libraries -->
    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/jquery/jquery.widget.min.js"></script>
    <script src="js/jquery/jquery.mousewheel.js"></script>
    <script src="js/jquery/jquery.easing.1.3.min.js"></script>
    <script src="js/holder/holder.js"></script>

    <script src="js/prettify/prettify.js"></script>

    <!-- Local JavaScript -->
    <script src="js/load-metro.js"></script>
    <!-- Local JavaScript -->
    <script src="js/docs.js"></script>
    <script src="js/github.info.js"></script>

    <title>Metro UI CSS : Metro Bootstrap CSS Library</title>
    <style>
        .indent {
            height: 40px;
        }
        .super-menu {
            position: fixed;
            top: 45px;
            left: 0;
            right: 0;
            z-index: 100;
        }
        .page {
            /*padding-top: 130px !important;*/
        }
        .super-menu li {
        }
        .super-menu a {
            text-decoration: underline;
        }
    </style>
</head>
<body class="metro">
<header class="bg-dark border" data-load="header.html"></header>
<div class="super-menu bg-grayLighter padding20 no-display">
    <div class="container">
        <ul class="inline">
            <li><a href="#_headings">Headings</a></li>
            <li><a href="#_text">Text</a></li>
            <li><a href="#_lists">Lists</a></li>
            <li><a href="#_description">Description</a></li>
            <li><a href="#_table">Table</a></li>
            <li><a href="#_buttons">Buttons</a></li>
            <li><a href="#_images">Images</a></li>
            <li><a href="#_tiles">Tiles</a></li>
            <li><a href="#_icons">Icons</a></li>
            <li><a href="#_forms">Forms &amp; Elements</a></li>
            <li><a href="#_sidebar">Sidebar</a></li>
            <li><a href="#_tab">Tab Control</a></li>
            <li><a href="#_accordion">Accordion</a></li>
            <li><a href="#_rating">Rating, Progree &amp; Slider</a></li>
            <li><a href="#_carousel">Carousel</a></li>
            <li><a href="#_treeview">TreeView &amp; ListView</a></li>
            <li><a href="#_hint">Hint &amp; Balloon</a></li>
            <li><a href="#_dates">Dates &amp; Times</a></li>
            <li><a href="#_window">Window &amp; Dialog</a></li>
            <li><a href="#_notify">Notifies</a></li>
        </ul>
    </div>
</div>
<div class="page container">
    <h2 class="fg-amber" id="_headigns">Headings</h2>
    <div class="example">
        <h1>h1. Header 1</h1>
        <h2>h2. Header 2</h2>
        <h3>h3. Header 3</h3>
        <h4>h4. Header 4</h4>
        <h5>h5. Header 5</h5>
        <h6>h6. Header 6</h6>
    </div>
    <div class="indent"></div>

    <h2 class="fg-amber" id="_text">Text</h2>
    <h3>Paragraph text</h3>
    <div class="example">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.</p>
        <p>Praesent molestie bibendum consequat. Suspendisse a felis eu augue venenatis egestas nec ac lectus. Nam nec felis lorem. Maecenas luctus est et nulla cursus vestibulum. Curabitur suscipit adipiscing dui eget sollicitudin. Sed accumsan tincidunt enim, in feugiat ligula ornare et.</p>
        <p>Nullam libero odio, lacinia vel dignissim sed, consequat ac nisi. Ut at mauris sit amet sem dapibus pretium sit amet sed orci. Quisque tincidunt sodales sollicitudin. Ut purus odio, imperdiet ut laoreet ac, placerat vel ante. Nulla tincidunt sapien in metus tincidunt imperdiet. Vestibulum a dui nisi. Morbi vestibulum nulla lacinia enim tempus ullamcorper.</p>
    </div>
    <h3>Readable text</h3>
    <div class="example">
        <p class="readable-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.</p>
        <p class="readable-text">Praesent molestie bibendum consequat. Suspendisse a felis eu augue venenatis egestas nec ac lectus. Nam nec felis lorem. Maecenas luctus est et nulla cursus vestibulum. Curabitur suscipit adipiscing dui eget sollicitudin. Sed accumsan tincidunt enim, in feugiat ligula ornare et.</p>
        <p class="readable-text">Nullam libero odio, lacinia vel dignissim sed, consequat ac nisi. Ut at mauris sit amet sem dapibus pretium sit amet sed orci. Quisque tincidunt sodales sollicitudin. Ut purus odio, imperdiet ut laoreet ac, placerat vel ante. Nulla tincidunt sapien in metus tincidunt imperdiet. Vestibulum a dui nisi. Morbi vestibulum nulla lacinia enim tempus ullamcorper.</p>
    </div>
    <h3>Tertiary and tertiary secondary text</h3>
    <div class="example">
        <p class="tertiary-text">Tertiary text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.</p>
        <p class="tertiary-text-secondary">Tertiary secondary text: Praesent molestie bibendum consequat. Suspendisse a felis eu augue venenatis egestas nec ac lectus. Nam nec felis lorem. Maecenas luctus est et nulla cursus vestibulum. Curabitur suscipit adipiscing dui eget sollicitudin. Sed accumsan tincidunt enim, in feugiat ligula ornare et.</p>
    </div>
    <h3>Code text</h3>
    <div class="example">
        <p class="code-text">Code text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.</p>
    </div>
    <div class="indent"></div>
    <h2 class="fg-amber">Emphasis</h2>
    <h4>Small</h4>
    <div class="example">
        This is a normal text, and the <small>text is reduced</small>.
    </div>
    <h4>Bold</h4>
    <div class="example">
        This is a normal text, and the <strong>text is strong</strong>.
    </div>
    <h4>Italic</h4>
    <div class="example">
        This is a normal text, and the <em>text is italics</em>.
    </div>
    <div class="indent"></div>
    <h2 class="fg-amber">Alignment classes</h2>
    <div class="example">
        <p class="text-left">Left aligned text</p>
        <p class="text-center">Center aligned text</p>
        <p class="text-right">Right aligned text</p>
    </div>
    <div class="indent"></div>
    <h2 class="fg-amber">Emphasis classes</h2>
    <div class="example">
        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit (muted).</p>
        <p class="text-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit (info).</p>
        <p class="text-alert">Lorem ipsum dolor sit amet, consectetur adipiscing elit (alert).</p>
        <p class="text-warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit (warning).</p>
        <p class="text-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit (success).</p>
    </div>
    <div class="indent"></div>
    <h2 class="fg-amber">Abbreviations</h2>
    <div class="example">
        An abbreviation of the word attribute is <abbr title="attribute description">attr</abbr>.
    </div>
    <div class="indent"></div>
    <h2 class="fg-amber">Addresses</h2>
    <div class="example">
        <address>
            <strong>Metro UI CSS</strong><br />
            Khreschatyk str, Suite 1<br>
            Kiev, Ukraine 01001<br>
            <abbr title="Phone">P:</abbr> (123) 456-7890
        </address>

        <address>
            <strong>Full Name</strong><br>
            <a href="mailto:#">first.last@example.com</a>
        </address>
    </div>
    <div class="indent"></div>
    <h2 class="fg-amber">Blockquotes</h2>
    <h4>Default blockquote</h4>
    <div class="example">
        <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        </blockquote>
    </div>
    <h4>Naming a source</h4>
    <div class="example">
        <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <small>Someone famous <cite title="Source Title">Source Title</cite></small>
        </blockquote>
    </div>
    <h4>Alternate displays</h4>
    <div class="example">
        <blockquote class="place-right">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <small>Someone famous <cite title="Source Title">Source Title</cite></small>
        </blockquote>
    </div>
    <div class="indent"></div>

    <h2 class="fg-amber" id="_lists">Lists</h2>
    <h4>Unordered</h4>
    <div class="example">
        <ul>
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit
                <ul>
                    <li>Phasellus iaculis neque</li>
                    <li>Purus sodales ultricies</li>
                    <li>Vestibulum laoreet porttitor sem</li>
                    <li>Ac tristique libero volutpat at
                        <ul>
                            <li>Phasellus iaculis neque</li>
                            <li>Purus sodales ultricies</li>
                            <li>Vestibulum laoreet porttitor sem</li>
                            <li>Ac tristique libero volutpat at</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
        </ul>
    </div>
    <h4>Ordered</h4>
    <div class="example">
        <ol>
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit</li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
        </ol>
    </div>
    <h4>Unstyled</h4>
    <div class="example">
        <ul class="unstyled">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit
                <ul>
                    <li>Phasellus iaculis neque</li>
                    <li>Purus sodales ultricies</li>
                    <li>Vestibulum laoreet porttitor sem</li>
                    <li>Ac tristique libero volutpat at
                        <ul>
                            <li>Phasellus iaculis neque</li>
                            <li>Purus sodales ultricies</li>
                            <li>Vestibulum laoreet porttitor sem</li>
                            <li>Ac tristique libero volutpat at</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
        </ul>
    </div>
    <h4>Inline</h4>
    <div class="example">
        <ul class="inline">
            <li>Lorem</li>
            <li>Consectetur</li>
            <li>Integer</li>
            <li>Facilisis</li>
        </ul>
    </div>
    <div class="indent"></div>

    <h2 class="fg-amber" id="_description">Description</h2>
    <div class="example">
        <dl>
            <dt>Description lists</dt>
            <dd>A description list is perfect for defining terms.</dd>
            <dt>Euismod</dt>
            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
            <dt>Malesuada porta</dt>
            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
        </dl>
    </div>
    <h4>Horizontal description</h4>
    <div class="example">
        <dl class="horizontal">
            <dt>Description lists</dt>
            <dd>A description list is perfect for defining terms.</dd>
            <dt>Euismod</dt>
            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
            <dt>Malesuada porta</dt>
            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
            <dt>Felis euismod semper eget lacinia</dt>
            <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
        </dl>
    </div>
    <div class="indent"></div>

    <h2 class="fg-amber" id="_table">Tables</h2>
    <h3>Default table styles</h3>
    <div class="example">
        <table class="table">
            <thead>
            <tr>
                <th class="text-left">Name</th>
                <th class="text-left">Time CP</th>
                <th class="text-left">Network</th>
                <th class="text-left">Traffic</th>
                <th class="text-left">Tiles update</th>
            </tr>
            </thead>

            <tbody>
            <tr><td>Bing</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr><td>Internet Explorer</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr><td>Chrome</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr><td>News</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr><td>Weather</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr><td>Music</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            </tbody>

            <tfoot></tfoot>
        </table>
    </div>
    <h3>Striped rows</h3>
    <div class="example">
        <table class="table striped">
            <thead>
            <tr>
                <th class="text-left">Name</th>
                <th class="text-left">Time CP</th>
                <th class="text-left">Network</th>
                <th class="text-left">Traffic</th>
                <th class="text-left">Tiles update</th>
            </tr>
            </thead>

            <tbody>
            <tr><td>Bing</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr><td>Internet Explorer</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr><td>Chrome</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr><td>News</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr><td>Weather</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr><td>Music</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            </tbody>

            <tfoot></tfoot>
        </table>
    </div>
    <h3 id="_bordered">Bordered table</h3>
    <div class="example">
        <table class="table bordered">
            <thead>
            <tr>
                <th class="text-left">Name</th>
                <th class="text-left">Time CP</th>
                <th class="text-left">Network</th>
                <th class="text-left">Traffic</th>
                <th class="text-left">Tiles update</th>
            </tr>
            </thead>

            <tbody>
            <tr><td>Bing</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr><td>Internet Explorer</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr><td>Chrome</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr><td>News</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr><td>Weather</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr><td>Music</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            </tbody>

            <tfoot></tfoot>
        </table>
    </div>
    <h3 id="_hovered">Hovered table</h3>
    <div class="example">
        <table class="table hovered">
            <thead>
            <tr>
                <th class="text-left">Name</th>
                <th class="text-left">Time CP</th>
                <th class="text-left">Network</th>
                <th class="text-left">Traffic</th>
                <th class="text-left">Tiles update</th>
            </tr>
            </thead>

            <tbody>
            <tr><td>Bing</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr><td>Internet Explorer</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr><td>Chrome</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr><td>News</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr><td>Weather</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr><td>Music</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            </tbody>

            <tfoot></tfoot>
        </table>
    </div>
    <h3 id="_optional">Optional row classes</h3>
    <div class="example">
        <table class="table">
            <thead>
            <tr>
                <th class="text-left">Name</th>
                <th class="text-left">Time CP</th>
                <th class="text-left">Network</th>
                <th class="text-left">Traffic</th>
                <th class="text-left">Tiles update</th>
            </tr>
            </thead>

            <tbody>
            <tr class="error"><td>Bing</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr class="success"><td>Internet Explorer</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr class="warning"><td>Chrome</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr class="info"><td>News</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr><td>Music</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            <tr class="selected"><td>Weather</td><td class="right">0:00:01</td><td class="right">0,1 Mb</td><td class="right">0 Mb</td><td class="right">0,1 Mb</td></tr>
            </tbody>

            <tfoot></tfoot>
        </table>
    </div>
    <div class="indent"></div>

    <h2 class="fg-amber" id="_buttons">Buttons</h2>
    <div class="example">
        <button class="button default">Default</button>
        <button class="button primary">Primary</button>
        <button class="button info">Info</button>
        <button class="button success">Success</button>
        <button class="button warning">Warning</button>
        <button class="button danger">Danger</button>
        <button class="button inverse">Inverse</button>
        <button class="button link">Link</button>
    </div>
    <div class="example">
        <button class="command-button ">
            <i class="icon-share-2 on-left"></i>
            Yes, share and connect
            <small>Use this option for home or work</small>
        </button>
        <button class="command-button">
            <i class="icon-share-3 on-right"></i>
            Yes, share and connect
            <small>Use this option for home or work</small>
        </button>
    </div>
    <div class="example">
        <button class="command-button primary">
            <i class="icon-share-2 on-left"></i>
            Yes, share and connect
            <small>Use this option for home or work</small>
        </button>
        <button class="command-button inverse">
            <i class="icon-share-3 on-right"></i>
            Yes, share and connect
            <small>Use this option for home or work</small>
        </button>
    </div>
    <div class="example">
        <div class="toolbar">
            <div class="toolbar-group">
                <button>1</button>
                <button>2</button>
                <button>3</button>
            </div>
            <div class="toolbar-group no-spaces">
                <button>1</button>
                <button>2</button>
                <button>3</button>
            </div>
        </div>
    </div>
    <div class="example">
        <div class="toolbar transparent">
            <button><i class="icon-folder-2 on-left"></i>Open</button>
            <button><i class="icon-floppy on-left"></i>Save</button>
            <button><i class="icon-spin on-left"></i>Refresh</button>
            <span class="divider"></span>
            <button><i class="icon-undo"></i></button>
            <button><i class="icon-redo"></i></button>
            <span class="divider"></span>
            <button><i class="icon-paragraph-left"></i></button>
            <button><i class="icon-paragraph-center"></i></button>
            <button><i class="icon-paragraph-right"></i></button>
            <button><i class="icon-paragraph-justify"></i></button>
        </div>
    </div>
    <div class="example">
        <div class="toolbar fg-red">
            <div class="toolbar-group">
                <button><i class="icon-folder-2"></i></button>
                <button><i class="icon-floppy"></i></button>
                <button><i class="icon-spin"></i></button>
            </div>
            <div class="toolbar-group">
                <button><i class="icon-undo"></i></button>
                <button><i class="icon-redo"></i></button>
            </div>
            <div class="toolbar-group">
                <button><i class="icon-paragraph-left"></i></button>
                <button><i class="icon-paragraph-center"></i></button>
                <button><i class="icon-paragraph-right"></i></button>
                <button><i class="icon-paragraph-justify"></i></button>
            </div>
        </div>
    </div>
    <div class="example">
        <div class="toolbar fg-red">
            <div class="toolbar-group">
                <button><i class="icon-folder-2"></i></button>
                <button><i class="icon-floppy"></i></button>
                <button><i class="icon-spin"></i></button>
            </div>
            <div class="toolbar-group fg-green">
                <button><i class="icon-undo"></i></button>
                <button><i class="icon-redo"></i></button>
            </div>
            <div class="toolbar-group fg-darkTeal transparent">
                <button><i class="icon-paragraph-left"></i></button>
                <button><i class="icon-paragraph-center"></i></button>
                <button><i class="icon-paragraph-right"></i></button>
                <button><i class="icon-paragraph-justify"></i></button>
            </div>
        </div>
    </div>
    <div class="example">
        <button class="image-button primary">
            Download
            <img src="images/download-32.png" class="bg-cobalt">
        </button>
        <button class="image-button danger">
            GitHub
            <i class="icon-github bg-red"></i>
        </button>
        <button class="image-button bg-darkGreen fg-white image-left">
            Windows
            <i class="icon-windows bg-green fg-white"></i>
        </button>
        <button class="image-button warning image-left">
            Fork
            <img src="images/fork-32.png" class="bg-cobalt">
        </button>
    </div>
    <div class="example">
        <button class="shortcut">
            <i class="icon-rocket"></i>
            Rocket
        </button>
        <button class="shortcut">
            <i class="icon-rocket"></i>
            Rocket
            <small class="bg-cobalt fg-white">10</small>
        </button>
    </div>
    <div class="example">
        <button class="shortcut primary">
            <i class="icon-rocket"></i>
            Rocket
            <small class="bg-lightBlue fg-white">10</small>
        </button>
        <button class="shortcut danger">
            <i class="icon-rocket"></i>
            Rocket
            <small class="bg-red fg-white">10</small>
        </button>
        <button class="shortcut link">
            <i class="icon-rocket"></i>
            Rocket
            <small class="bg-cobalt fg-white">10</small>
        </button>
    </div>
    <div class="example">
        <div class="button-dropdown place-right">
            <button class="dropdown-toggle">Click Me</button>
            <ul class="dropdown-menu place-right" data-role="dropdown">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li>
                    <a class="dropdown-toggle" href="#">Something else here</a>
                    <ul class="dropdown-menu drop-left" data-role="dropdown">
                        <li><a href="#">Sublink 1</a></li>
                        <li><a href="#">Sublink 2</a></li>
                        <li><a href="#">Sublink 3</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Sublink 3</a></li>
                    </ul>
                </li>
                <li class="divider"></li>
                <li class="disabled"><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li class="checked"><a href="#">Checked link</a></li>
            </ul>
        </div>
        <div class="button-dropdown">
            <button class="dropdown-toggle">Click Me</button>
            <ul class="dropdown-menu" data-role="dropdown">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li>
                    <a class="dropdown-toggle" href="#">Something else here</a>
                    <ul class="dropdown-menu" data-role="dropdown">
                        <li><a href="#">Sublink 1</a></li>
                        <li><a href="#">Sublink 2</a></li>
                        <li><a href="#">Sublink 3</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Sublink 3</a></li>
                    </ul>
                </li>
                <li class="divider"></li>
                <li class="disabled"><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li class="checked"><a href="#">Checked link</a></li>
            </ul>
        </div>
    </div>
    <div class="example">
        <div class="pagination">
            <ul>
                <li class="first"><a><i class="icon-first-2"></i></a></li>
                <li class="prev"><a><i class="icon-previous"></i></a></li>
                <li><a>1</a></li>
                <li><a>2</a></li>
                <li class="active"><a>3</a></li>
                <li class="spaces"><a>...</a></li>
                <li class="disabled"><a>4</a></li>
                <li><a>500</a></li>
                <li class="next"><a><i class="icon-next"></i></a></li>
                <li class="last"><a><i class="icon-last-2"></i></a></li>
            </ul>
        </div>
        <div class="pagination small">
            <ul>
                <li class="first"><a><i class="icon-first-2"></i></a></li>
                <li class="prev"><a><i class="icon-previous"></i></a></li>
                <li><a>1</a></li>
                <li><a>2</a></li>
                <li class="active"><a>3</a></li>
                <li class="spaces"><a>...</a></li>
                <li class="disabled"><a>4</a></li>
                <li><a>500</a></li>
                <li class="next"><a><i class="icon-next"></i></a></li>
                <li class="last"><a><i class="icon-last-2"></i></a></li>
            </ul>
        </div>
        <div class="pagination mini">
            <ul>
                <li class="first"><a><i class="icon-first-2"></i></a></li>
                <li class="prev"><a><i class="icon-previous"></i></a></li>
                <li><a>1</a></li>
                <li><a>2</a></li>
                <li class="active"><a>3</a></li>
                <li class="spaces"><a>...</a></li>
                <li class="disabled"><a>4</a></li>
                <li><a>500</a></li>
                <li class="next"><a><i class="icon-next"></i></a></li>
                <li class="last"><a><i class="icon-last-2"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="example">
        <div class="button-set" data-role="button-set">
            <button>One</button>
            <button>Two</button>
            <button>Three</button>
            <button>Four</button>
            <button>Five</button>
        </div>
    </div>
    <div class="example">
        <div class="button-set" data-role="button-group">
            <button class="active">One</button>
            <button>Two</button>
            <button>Three</button>
            <button>Four</button>
            <button>Five</button>
        </div>
    </div>
    <div class="example">
        <nav class="breadcrumbs">
            <ul>
                <li><a href="#"><i class="icon-home"></i></a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Library</a></li>
                <li class="active"><a href="#">Data</a></li>
            </ul>
        </nav>
        <nav class="breadcrumbs small">
            <ul>
                <li><a href="#"><i class="icon-home"></i></a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Library</a></li>
                <li class="active"><a href="#">Data</a></li>
            </ul>
        </nav>
        <nav class="breadcrumbs mini">
            <ul>
                <li><a href="#"><i class="icon-home"></i></a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Library</a></li>
                <li class="active"><a href="#">Data</a></li>
            </ul>
        </nav>
    </div>
    <div class="indent"></div>

    <h2 class="fg-amber" id="_images">Images</h2>
    <h3>General</h3>
    <div class="example">
        <img src="js/holder/holder.js/120x120" class="rounded">
        <img src="js/holder/holder.js/120x120" class="cycle">
        <img src="js/holder/holder.js/120x120" class="polaroid">
        <img src="js/holder/holder.js/120x120" class="rounded polaroid">
        <img src="js/holder/holder.js/120x120" class="cycle polaroid">
        <img src="js/holder/holder.js/120x120" class="shadow">
    </div>
    <h4>Border color</h4>
    <div class="example">
        <img src="js/holder/holder.js/120x120" class="rounded bd-amber">
        <img src="js/holder/holder.js/120x120" class="cycle bd-cobalt">
        <img src="js/holder/holder.js/120x120" class="polaroid bd-red">
        <img src="js/holder/holder.js/120x120" class="polaroid bd-white shadow">
        <img src="js/holder/holder.js/120x120" class="polaroid bd-red bg-lightPink">
    </div>
    <h4>Background color</h4>
    <div class="example">
        <img src="js/holder/holder.js/120x120" class="polaroid bg-cobalt">
        <img src="js/holder/holder.js/120x120" class="polaroid bg-red">
        <img src="js/holder/holder.js/120x120" class="polaroid bg-steel">
        <img src="js/holder/holder.js/120x120" class="polaroid bg-lightBlue bd-white shadow">
    </div>
    <h4>Image size</h4>
    <div class="example">
        <img src="images/2.jpg" class="span2">
        <img src="images/2.jpg" class="span3">
        <img src="images/2.jpg" class="span4">
    </div>
    <h3>Image container</h3>
    <div class="example">
        <div class="image-container">
            <img src="images/2.jpg">
            <div class="overlay">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </div>
        </div>
        <div class="image-container shadow">
            <img src="images/2.jpg">
            <div class="overlay-fluid">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </div>
        </div>
        <div class="image-container selected">
            <img src="images/2.jpg">
        </div>
    </div>
    <div class="indent"></div>

    <h2 class="fg-amber" id="_tiles">Tiles</h2>
    <div class="example">
        <div class="tiles">
            <div class="tile half"></div>
            <div class="tile"></div>
            <div class="tile double"></div>
            <div class="tile selected"></div>
        </div>
    </div>
    <h3>Tile sizes</h3>
    <div class="example">
        <div class="tile half block"><img src="js/holder/holder.js/55x55"></div>
        <div class="tile block"><img src="js/holder/holder.js/120x120"></div>
        <div class="tile double block"><img src="js/holder/holder.js/250x120"></div>
        <div class="tile triple block"><img src="js/holder/holder.js/380x120"></div>
        <div class="tile quadro block"><img src="js/holder/holder.js/530x120"></div>
    </div>
    <h3>Tile Badges</h3>
    <div class="example">
        <div class="tile bg-cyan">
            <div class="tile-status">
                <div class="badge bg-red">99</div>
            </div>
        </div>
        <div class="tile bg-cyan">
            <div class="tile-status">
                <div class="badge activity"></div>
            </div>
        </div>
        <div class="tile bg-cyan">
            <div class="brand">
                <div class="badge alert"></div>
            </div>
        </div>
        <div class="tile bg-cyan">
            <div class="brand">
                <div class="badge available"></div>
            </div>
        </div>
        <div class="tile bg-cyan">
            <div class="brand">
                <div class="badge away"></div>
            </div>
        </div>
        <div class="tile bg-cyan">
            <div class="brand">
                <div class="badge busy"></div>
            </div>
        </div>
        <div class="tile bg-cyan">
            <div class="brand">
                <div class="badge newMessage"></div>
            </div>
        </div>
        <div class="tile bg-cyan">
            <div class="brand">
                <div class="badge paused"></div>
            </div>
        </div>
        <div class="tile bg-cyan">
            <div class="brand">
                <div class="badge playing"></div>
            </div>
        </div>
        <div class="tile bg-cyan">
            <div class="brand">
                <div class="badge unavailable"></div>
            </div>
        </div>
        <div class="tile bg-cyan">
            <div class="brand">
                <div class="badge error"></div>
            </div>
        </div>
        <div class="tile bg-cyan">
            <div class="brand">
                <div class="badge attention"></div>
            </div>
        </div>
    </div>
    <div class="example">
        <div class="tile bg-cyan">
            <div class="brand">
                <div class="badge"><i class="icon-rocket"></i></div>
            </div>
        </div>
        <div class="tile bg-darkRed">
            <div class="brand">
                <div class="badge bg-red"><i class="icon-broadcast"></i></div>
            </div>
        </div>
    </div>
    <h3>Tile status (brand)</h3>
    <div class="example">
        <div class="tile bg-darkPink">
            <div class="tile-content icon">
                <i class="icon-cart-2"></i>
            </div>
            <div class="tile-status">
                <span class="name">Store</span>
            </div>
        </div>
        <div class="tile double bg-amber">
            <div class="tile-content icon">
                <i class="icon-play-alt"></i>
            </div>
            <div class="brand bg-black">
                <span class="label fg-white">Player</span>
                <div class="badge bg-darkRed paused"></div>
            </div>
        </div>
        <div class="tile">
            <div class="tile-content image">
                <img src="images/author.jpg">
            </div>
            <div class="brand">
                <span class="label fg-white">Images</span>
                <span class="badge bg-orange">12</span>
            </div>
        </div>
        <div class="tile double">
            <div class="tile-content image">
                <img src="images/4.jpg">
            </div>
            <div class="brand bg-dark opacity">
                <span class="text">
                    This is a desert eagle. He is very hungry and angry bird.
                </span>
            </div>
        </div>
    </div>
    <h3>Tile content</h3>
    <div class="example">
        <div class="tile half bg-darkRed">
            <div class="tile-content icon">
                <i class="icon-rocket"></i>
            </div>
        </div>
        <div class="tile bg-green">
            <div class="tile-content icon">
                <img src="images/excel2013icon.png">
            </div>
        </div>
        <div class="tile double">
            <div class="tile-content image">
                <img src="images/1.jpg">
            </div>
        </div>
        <div class="tile double">
            <div class="tile-content image-set">
                <img src="images/1.jpg">
                <img src="images/2.jpg">
                <img src="images/3.jpg">
                <img src="images/4.jpg">
                <img src="images/5.jpg">
            </div>
        </div>
    </div>
    <h3>Live Tile</h3>
    <div class="example">
        <div class="tile double live" data-role="live-tile">
            <div class="tile-content image">
                <img src="images/1.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/2.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/3.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/4.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/5.jpg">
            </div>

            <div class="tile-status bg-dark opacity">
                <span class="label">effect: slideLeft</span>
            </div>
        </div>

        <div class="tile double live" data-role="live-tile" data-effect="slideRight">
            <div class="tile-content image">
                <img src="images/1.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/2.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/3.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/4.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/5.jpg">
            </div>

            <div class="tile-status bg-dark opacity">
                <span class="label">effect: slideRight</span>
            </div>
        </div>

        <div class="tile double live" data-role="live-tile" data-effect="slideLeftRight">
            <div class="tile-content image">
                <img src="images/1.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/2.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/3.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/4.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/5.jpg">
            </div>

            <div class="tile-status bg-dark opacity">
                <span class="label">effect: slideLeftRight</span>
            </div>
        </div>

        <div class="tile double live" data-role="live-tile" data-effect="slideUp">
            <div class="tile-content image">
                <img src="images/1.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/2.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/3.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/4.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/5.jpg">
            </div>

            <div class="tile-status bg-dark opacity">
                <span class="label">effect: slideUp</span>
            </div>
        </div>

        <div class="tile double live" data-role="live-tile" data-effect="slideDown">
            <div class="tile-content image">
                <img src="images/1.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/2.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/3.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/4.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/5.jpg">
            </div>

            <div class="tile-status bg-dark opacity">
                <span class="label">effect: slideDown</span>
            </div>
        </div>

        <div class="tile double live" data-role="live-tile" data-effect="slideUpDown">
            <div class="tile-content image">
                <img src="images/1.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/2.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/3.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/4.jpg">
            </div>
            <div class="tile-content image">
                <img src="images/5.jpg">
            </div>

            <div class="tile-status bg-dark opacity">
                <span class="label">effect: slideUpDown</span>
            </div>
        </div>
    </div>
    <div class="indent"></div>

    <h2 id="_icons">Icons</h2>
    <div class="example">
        <h3><i class="icon-rocket on-left"></i>icon-rocket</h3>
    </div>
    <div class="example">
        <h3>icon<i class="icon-rocket on-left on-right" style="background: red; color: white; padding: 10px; border-radius: 50%"></i>rocket</h3>
    </div>
    <ol class="unstyled four-columns" id="icon-list">
    <li><i class="icon-home"></i> icon-home</li>
    <li><i class="icon-newspaper"></i> icon-newspaper</li>
    <li><i class="icon-pencil"></i> icon-pencil</li>
    <li><i class="icon-droplet"></i> icon-droplet</li>
    <li><i class="icon-pictures"></i> icon-pictures</li>
    <li><i class="icon-camera"></i> icon-camera</li>
    <li><i class="icon-music"></i> icon-music</li>
    <li><i class="icon-film"></i> icon-film</li>
    <li><i class="icon-camera-2"></i> icon-camera-2</li>
    <li><i class="icon-spades"></i> icon-spades</li>
    <li><i class="icon-clubs"></i> icon-clubs</li>
    <li><i class="icon-diamonds"></i> icon-diamonds</li>
    <li><i class="icon-broadcast"></i> icon-broadcast</li>
    <li><i class="icon-mic"></i> icon-mic</li>
    <li><i class="icon-book"></i> icon-book</li>
    <li><i class="icon-file"></i> icon-file</li>
    <li><i class="icon-new"></i> icon-new</li>
    <li><i class="icon-copy"></i> icon-copy</li>
    <li><i class="icon-folder"></i> icon-folder</li>
    <li><i class="icon-folder-2"></i> icon-folder-2</li>
    <li><i class="icon-tag"></i> icon-tag</li>
    <li><i class="icon-cart"></i> icon-cart</li>
    <li><i class="icon-basket"></i> icon-basket</li>
    <li><i class="icon-calculate"></i> icon-calculate</li>
    <li><i class="icon-support"></i> icon-support</li>
    <li><i class="icon-phone"></i> icon-phone</li>
    <li><i class="icon-mail"></i> icon-mail</li>
    <li><i class="icon-location"></i> icon-location</li>
    <li><i class="icon-compass"></i> icon-compass</li>
    <li><i class="icon-history"></i> icon-history</li>
    <li><i class="icon-clock"></i> icon-clock</li>
    <li><i class="icon-bell"></i> icon-bell</li>
    <li><i class="icon-calendar"></i> icon-calendar</li>
    <li><i class="icon-printer"></i> icon-printer</li>
    <li><i class="icon-mouse"></i> icon-mouse</li>
    <li><i class="icon-screen"></i> icon-screen</li>
    <li><i class="icon-laptop"></i> icon-laptop</li>
    <li><i class="icon-mobile"></i> icon-mobile</li>
    <li><i class="icon-cabinet"></i> icon-cabinet</li>
    <li><i class="icon-drawer"></i> icon-drawer</li>
    <li><i class="icon-drawer-2"></i> icon-drawer-2</li>
    <li><i class="icon-box"></i> icon-box</li>
    <li><i class="icon-box-add"></i> icon-box-add</li>
    <li><i class="icon-box-remove"></i> icon-box-remove</li>
    <li><i class="icon-download"></i> icon-download</li>
    <li><i class="icon-upload"></i> icon-upload</li>
    <li><i class="icon-database"></i> icon-database</li>
    <li><i class="icon-flip"></i> icon-flip</li>
    <li><i class="icon-flip-2"></i> icon-flip-2</li>
    <li><i class="icon-undo"></i> icon-undo</li>
    <li><i class="icon-redo"></i> icon-redo</li>
    <li><i class="icon-forward"></i> icon-forward</li>
    <li><i class="icon-reply"></i> icon-reply</li>
    <li><i class="icon-reply-2"></i> icon-reply-2</li>
    <li><i class="icon-comments"></i> icon-comments</li>
    <li><i class="icon-comments-2"></i> icon-comments-2</li>
    <li><i class="icon-comments-3"></i> icon-comments-3</li>
    <li><i class="icon-comments-4"></i> icon-comments-4</li>
    <li><i class="icon-comments-5"></i> icon-comments-5</li>
    <li><i class="icon-user"></i> icon-user</li>
    <li><i class="icon-user-2"></i> icon-user-2</li>
    <li><i class="icon-user-3"></i> icon-user-3</li>
    <li><i class="icon-busy"></i> icon-busy</li>
    <li><i class="icon-loading"></i> icon-loading</li>
    <li><i class="icon-loading-2"></i> icon-loading-2</li>
    <li><i class="icon-search"></i> icon-search</li>
    <li><i class="icon-zoom-in"></i> icon-zoom-in</li>
    <li><i class="icon-zoom-out"></i> icon-zoom-out</li>
    <li><i class="icon-key"></i> icon-key</li>
    <li><i class="icon-key-2"></i> icon-key-2</li>
    <li><i class="icon-locked"></i> icon-locked</li>
    <li><i class="icon-unlocked"></i> icon-unlocked</li>
    <li><i class="icon-wrench"></i> icon-wrench</li>
    <li><i class="icon-equalizer"></i> icon-equalizer</li>
    <li><i class="icon-cog"></i> icon-cog</li>
    <li><i class="icon-pie"></i> icon-pie</li>
    <li><i class="icon-bars"></i> icon-bars</li>
    <li><i class="icon-stats-up"></i> icon-stats-up</li>
    <li><i class="icon-gift"></i> icon-gift</li>
    <li><i class="icon-trophy"></i> icon-trophy</li>
    <li><i class="icon-diamond"></i> icon-diamond</li>
    <li><i class="icon-coffee"></i> icon-coffee</li>
    <li><i class="icon-rocket"></i> icon-rocket</li>
    <li><i class="icon-meter-slow"></i> icon-meter-slow</li>
    <li><i class="icon-meter-medium"></i> icon-meter-medium</li>
    <li><i class="icon-meter-fast"></i> icon-meter-fast</li>
    <li><i class="icon-dashboard"></i> icon-dashboard</li>
    <li><i class="icon-fire"></i> icon-fire</li>
    <li><i class="icon-lab"></i> icon-lab</li>
    <li><i class="icon-remove"></i> icon-remove</li>
    <li><i class="icon-briefcase"></i> icon-briefcase</li>
    <li><i class="icon-briefcase-2"></i> icon-briefcase-2</li>
    <li><i class="icon-cars"></i> icon-cars</li>
    <li><i class="icon-bus"></i> icon-bus</li>
    <li><i class="icon-cube"></i> icon-cube</li>
    <li><i class="icon-cube-2"></i> icon-cube-2</li>
    <li><i class="icon-puzzle"></i> icon-puzzle</li>
    <li><i class="icon-glasses"></i> icon-glasses</li>
    <li><i class="icon-glasses-2"></i> icon-glasses-2</li>
    <li><i class="icon-accessibility"></i> icon-accessibility</li>
    <li><i class="icon-accessibility-2"></i> icon-accessibility-2</li>
    <li><i class="icon-target"></i> icon-target</li>
    <li><i class="icon-target-2"></i> icon-target-2</li>
    <li><i class="icon-lightning"></i> icon-lightning</li>
    <li><i class="icon-power"></i> icon-power</li>
    <li><i class="icon-power-2"></i> icon-power-2</li>
    <li><i class="icon-clipboard"></i> icon-clipboard</li>
    <li><i class="icon-clipboard-2"></i> icon-clipboard-2</li>
    <li><i class="icon-playlist"></i> icon-playlist</li>
    <li><i class="icon-grid-view"></i> icon-grid-view</li>
    <li><i class="icon-tree-view"></i> icon-tree-view</li>
    <li><i class="icon-cloud"></i> icon-cloud</li>
    <li><i class="icon-cloud-2"></i> icon-cloud-2</li>
    <li><i class="icon-download-2"></i> icon-download-2</li>
    <li><i class="icon-upload-2"></i> icon-upload-2</li>
    <li><i class="icon-upload-3"></i> icon-upload-3</li>
    <li><i class="icon-link"></i> icon-link</li>
    <li><i class="icon-link-2"></i> icon-link-2</li>
    <li><i class="icon-flag"></i> icon-flag</li>
    <li><i class="icon-flag-2"></i> icon-flag-2</li>
    <li><i class="icon-attachment"></i> icon-attachment</li>
    <li><i class="icon-eye"></i> icon-eye</li>
    <li><i class="icon-bookmark"></i> icon-bookmark</li>
    <li><i class="icon-bookmark-2"></i> icon-bookmark-2</li>
    <li><i class="icon-star"></i> icon-star</li>
    <li><i class="icon-star-2"></i> icon-star-2</li>
    <li><i class="icon-star-3"></i> icon-star-3</li>
    <li><i class="icon-heart"></i> icon-heart</li>
    <li><i class="icon-heart-2"></i> icon-heart-2</li>
    <li><i class="icon-thumbs-up"></i> icon-thumbs-up</li>
    <li><i class="icon-thumbs-down"></i> icon-thumbs-down</li>
    <li><i class="icon-plus"></i> icon-plus</li>
    <li><i class="icon-minus"></i> icon-minus</li>
    <li><i class="icon-help"></i> icon-help</li>
    <li><i class="icon-help-2"></i> icon-help-2</li>
    <li><i class="icon-blocked"></i> icon-blocked</li>
    <li><i class="icon-cancel"></i> icon-cancel</li>
    <li><i class="icon-cancel-2"></i> icon-cancel-2</li>
    <li><i class="icon-checkmark"></i> icon-checkmark</li>
    <li><i class="icon-minus-2"></i> icon-minus-2</li>
    <li><i class="icon-plus-2"></i> icon-plus-2</li>
    <li><i class="icon-enter"></i> icon-enter</li>
    <li><i class="icon-exit"></i> icon-exit</li>
    <li><i class="icon-loop"></i> icon-loop</li>
    <li><i class="icon-arrow-up-left"></i> icon-arrow-up-left</li>
    <li><i class="icon-arrow-up"></i> icon-arrow-up</li>
    <li><i class="icon-arrow-up-right"></i> icon-arrow-up-right</li>
    <li><i class="icon-arrow-right"></i> icon-arrow-right</li>
    <li><i class="icon-arrow-down-right"></i> icon-arrow-down-right</li>
    <li><i class="icon-arrow-down"></i> icon-arrow-down</li>
    <li><i class="icon-arrow-down-left"></i> icon-arrow-down-left</li>
    <li><i class="icon-arrow-left"></i> icon-arrow-left</li>
    <li><i class="icon-arrow-up-2"></i> icon-arrow-up-2</li>
    <li><i class="icon-arrow-right-2"></i> icon-arrow-right-2</li>
    <li><i class="icon-arrow-down-2"></i> icon-arrow-down-2</li>
    <li><i class="icon-arrow-left-2"></i> icon-arrow-left-2</li>
    <li><i class="icon-arrow-up-3"></i> icon-arrow-up-3</li>
    <li><i class="icon-arrow-right-3"></i> icon-arrow-right-3</li>
    <li><i class="icon-arrow-down-3"></i> icon-arrow-down-3</li>
    <li><i class="icon-arrow-left-3"></i> icon-arrow-left-3</li>
    <li><i class="icon-menu"></i> icon-menu</li>
    <li><i class="icon-enter-2"></i> icon-enter-2</li>
    <li><i class="icon-backspace"></i> icon-backspace</li>
    <li><i class="icon-backspace-2"></i> icon-backspace-2</li>
    <li><i class="icon-tab"></i> icon-tab</li>
    <li><i class="icon-tab-2"></i> icon-tab-2</li>
    <li><i class="icon-checkbox"></i> icon-checkbox</li>
    <li><i class="icon-checkbox-unchecked"></i> icon-checkbox-unchecked</li>
    <li><i class="icon-checkbox-partial"></i> icon-checkbox-partial</li>
    <li><i class="icon-radio-checked"></i> icon-radio-checked</li>
    <li><i class="icon-radio-unchecked"></i> icon-radio-unchecked</li>
    <li><i class="icon-font"></i> icon-font</li>
    <li><i class="icon-paragraph-left"></i> icon-paragraph-left</li>
    <li><i class="icon-paragraph-center"></i> icon-paragraph-center</li>
    <li><i class="icon-paragraph-right"></i> icon-paragraph-right</li>
    <li><i class="icon-paragraph-justify"></i> icon-paragraph-justify</li>
    <li><i class="icon-left-to-right"></i> icon-left-to-right</li>
    <li><i class="icon-right-to-left"></i> icon-right-to-left</li>
    <li><i class="icon-share"></i> icon-share</li>
    <li><i class="icon-new-tab"></i> icon-new-tab</li>
    <li><i class="icon-new-tab-2"></i> icon-new-tab-2</li>
    <li><i class="icon-embed"></i> icon-embed</li>
    <li><i class="icon-code"></i> icon-code</li>
    <li><i class="icon-bluetooth"></i> icon-bluetooth</li>
    <li><i class="icon-share-2"></i> icon-share-2</li>
    <li><i class="icon-share-3"></i> icon-share-3</li>
    <li><i class="icon-mail-2"></i> icon-mail-2</li>
    <li><i class="icon-google"></i> icon-google</li>
    <li><i class="icon-google-plus"></i> icon-google-plus</li>
    <li><i class="icon-google-drive"></i> icon-google-drive</li>
    <li><i class="icon-facebook"></i> icon-facebook</li>
    <li><i class="icon-instagram"></i> icon-instagram</li>
    <li><i class="icon-twitter"></i> icon-twitter</li>
    <li><i class="icon-feed"></i> icon-feed</li>
    <li><i class="icon-youtube"></i> icon-youtube</li>
    <li><i class="icon-vimeo"></i> icon-vimeo</li>
    <li><i class="icon-flickr"></i> icon-flickr</li>
    <li><i class="icon-picassa"></i> icon-picassa</li>
    <li><i class="icon-dribbble"></i> icon-dribbble</li>
    <li><i class="icon-deviantart"></i> icon-deviantart</li>
    <li><i class="icon-github"></i> icon-github</li>
    <li><i class="icon-github-2"></i> icon-github-2</li>
    <li><i class="icon-github-3"></i> icon-github-3</li>
    <li><i class="icon-github-4"></i> icon-github-4</li>
    <li><i class="icon-github-5"></i> icon-github-5</li>
    <li><i class="icon-github-6"></i> icon-github-6</li>
    <li><i class="icon-git"></i> icon-git</li>
    <li><i class="icon-wordpress"></i> icon-wordpress</li>
    <li><i class="icon-joomla"></i> icon-joomla</li>
    <li><i class="icon-blogger"></i> icon-blogger</li>
    <li><i class="icon-tumblr"></i> icon-tumblr</li>
    <li><i class="icon-yahoo"></i> icon-yahoo</li>
    <li><i class="icon-amazon"></i> icon-amazon</li>
    <li><i class="icon-tux"></i> icon-tux</li>
    <li><i class="icon-apple"></i> icon-apple</li>
    <li><i class="icon-finder"></i> icon-finder</li>
    <li><i class="icon-android"></i> icon-android</li>
    <li><i class="icon-windows"></i> icon-windows</li>
    <li><i class="icon-soundcloud"></i> icon-soundcloud</li>
    <li><i class="icon-skype"></i> icon-skype</li>
    <li><i class="icon-reddit"></i> icon-reddit</li>
    <li><i class="icon-linkedin"></i> icon-linkedin</li>
    <li><i class="icon-lastfm"></i> icon-lastfm</li>
    <li><i class="icon-delicious"></i> icon-delicious</li>
    <li><i class="icon-stumbleupon"></i> icon-stumbleupon</li>
    <li><i class="icon-pinterest"></i> icon-pinterest</li>
    <li><i class="icon-xing"></i> icon-xing</li>
    <li><i class="icon-flattr"></i> icon-flattr</li>
    <li><i class="icon-foursquare"></i> icon-foursquare</li>
    <li><i class="icon-paypal"></i> icon-paypal</li>
    <li><i class="icon-yelp"></i> icon-yelp</li>
    <li><i class="icon-libreoffice"></i> icon-libreoffice</li>
    <li><i class="icon-file-pdf"></i> icon-file-pdf</li>
    <li><i class="icon-file-openoffice"></i> icon-file-openoffice</li>
    <li><i class="icon-file-word"></i> icon-file-word</li>
    <li><i class="icon-file-excel"></i> icon-file-excel</li>
    <li><i class="icon-file-powerpoint"></i> icon-file-powerpoint</li>
    <li><i class="icon-file-zip"></i> icon-file-zip</li>
    <li><i class="icon-file-xml"></i> icon-file-xml</li>
    <li><i class="icon-file-css"></i> icon-file-css</li>
    <li><i class="icon-html5"></i> icon-html5</li>
    <li><i class="icon-html5-2"></i> icon-html5-2</li>
    <li><i class="icon-css3"></i> icon-css3</li>
    <li><i class="icon-chrome"></i> icon-chrome</li>
    <li><i class="icon-firefox"></i> icon-firefox</li>
    <li><i class="icon-IE"></i> icon-IE</li>
    <li><i class="icon-opera"></i> icon-opera</li>
    <li><i class="icon-safari"></i> icon-safari</li>
    <li><i class="icon-IcoMoon"></i> icon-IcoMoon</li>
    <li><i class="icon-sunrise"></i> icon-sunrise</li>
    <li><i class="icon-sun"></i> icon-sun</li>
    <li><i class="icon-moon"></i> icon-moon</li>
    <li><i class="icon-sun-2"></i> icon-sun-2</li>
    <li><i class="icon-windy"></i> icon-windy</li>
    <li><i class="icon-wind"></i> icon-wind</li>
    <li><i class="icon-snowflake"></i> icon-snowflake</li>
    <li><i class="icon-cloudy"></i> icon-cloudy</li>
    <li><i class="icon-cloud-3"></i> icon-cloud-3</li>
    <li><i class="icon-weather"></i> icon-weather</li>
    <li><i class="icon-weather-2"></i> icon-weather-2</li>
    <li><i class="icon-weather-3"></i> icon-weather-3</li>
    <li><i class="icon-lines"></i> icon-lines</li>
    <li><i class="icon-cloud-4"></i> icon-cloud-4</li>
    <li><i class="icon-lightning-2"></i> icon-lightning-2</li>
    <li><i class="icon-lightning-3"></i> icon-lightning-3</li>
    <li><i class="icon-rainy"></i> icon-rainy</li>
    <li><i class="icon-rainy-2"></i> icon-rainy-2</li>
    <li><i class="icon-windy-2"></i> icon-windy-2</li>
    <li><i class="icon-windy-3"></i> icon-windy-3</li>
    <li><i class="icon-snowy"></i> icon-snowy</li>
    <li><i class="icon-snowy-2"></i> icon-snowy-2</li>
    <li><i class="icon-snowy-3"></i> icon-snowy-3</li>
    <li><i class="icon-weather-4"></i> icon-weather-4</li>
    <li><i class="icon-cloudy-2"></i> icon-cloudy-2</li>
    <li><i class="icon-cloud-5"></i> icon-cloud-5</li>
    <li><i class="icon-lightning-4"></i> icon-lightning-4</li>
    <li><i class="icon-sun-3"></i> icon-sun-3</li>
    <li><i class="icon-moon-2"></i> icon-moon-2</li>
    <li><i class="icon-cloudy-3"></i> icon-cloudy-3</li>
    <li><i class="icon-cloud-6"></i> icon-cloud-6</li>
    <li><i class="icon-cloud-7"></i> icon-cloud-7</li>
    <li><i class="icon-lightning-5"></i> icon-lightning-5</li>
    <li><i class="icon-rainy-3"></i> icon-rainy-3</li>
    <li><i class="icon-rainy-4"></i> icon-rainy-4</li>
    <li><i class="icon-windy-4"></i> icon-windy-4</li>
    <li><i class="icon-windy-5"></i> icon-windy-5</li>
    <li><i class="icon-snowy-4"></i> icon-snowy-4</li>
    <li><i class="icon-snowy-5"></i> icon-snowy-5</li>
    <li><i class="icon-weather-5"></i> icon-weather-5</li>
    <li><i class="icon-cloudy-4"></i> icon-cloudy-4</li>
    <li><i class="icon-lightning-6"></i> icon-lightning-6</li>
    <li><i class="icon-thermometer"></i> icon-thermometer</li>
    <li><i class="icon-compass-2"></i> icon-compass-2</li>
    <li><i class="icon-none"></i> icon-none</li>
    <li><i class="icon-Celsius"></i> icon-Celsius</li>
    <li><i class="icon-Fahrenheit"></i> icon-Fahrenheit</li>
    <li><i class="icon-forrst"></i> icon-forrst</li>
    <li><i class="icon-headphones"></i> icon-headphones</li>
    <li><i class="icon-bug"></i> icon-bug</li>
    <li><i class="icon-cart-2"></i> icon-cart-2</li>
    <li><i class="icon-earth"></i> icon-earth</li>
    <li><i class="icon-battery"></i> icon-battery</li>
    <li><i class="icon-list"></i> icon-list</li>
    <li><i class="icon-grid"></i> icon-grid</li>
    <li><i class="icon-alarm"></i> icon-alarm</li>
    <li><i class="icon-location-2"></i> icon-location-2</li>
    <li><i class="icon-pointer"></i> icon-pointer</li>
    <li><i class="icon-diary"></i> icon-diary</li>
    <li><i class="icon-eye-2"></i> icon-eye-2</li>
    <li><i class="icon-console"></i> icon-console</li>
    <li><i class="icon-location-3"></i> icon-location-3</li>
    <li><i class="icon-move"></i> icon-move</li>
    <li><i class="icon-monitor"></i> icon-monitor</li>
    <li><i class="icon-mobile-2"></i> icon-mobile-2</li>
    <li><i class="icon-switch"></i> icon-switch</li>
    <li><i class="icon-star-4"></i> icon-star-4</li>
    <li><i class="icon-address-book"></i> icon-address-book</li>
    <li><i class="icon-shit"></i> icon-shit</li>
    <li><i class="icon-cone"></i> icon-cone</li>
    <li><i class="icon-credit-card"></i> icon-credit-card</li>
    <li><i class="icon-type"></i> icon-type</li>
    <li><i class="icon-volume"></i> icon-volume</li>
    <li><i class="icon-volume-2"></i> icon-volume-2</li>
    <li><i class="icon-locked-2"></i> icon-locked-2</li>
    <li><i class="icon-warning"></i> icon-warning</li>
    <li><i class="icon-info"></i> icon-info</li>
    <li><i class="icon-filter"></i> icon-filter</li>
    <li><i class="icon-bookmark-3"></i> icon-bookmark-3</li>
    <li><i class="icon-bookmark-4"></i> icon-bookmark-4</li>
    <li><i class="icon-stats"></i> icon-stats</li>
    <li><i class="icon-compass-3"></i> icon-compass-3</li>
    <li><i class="icon-keyboard"></i> icon-keyboard</li>
    <li><i class="icon-award-fill"></i> icon-award-fill</li>
    <li><i class="icon-award-stroke"></i> icon-award-stroke</li>
    <li><i class="icon-beaker-alt"></i> icon-beaker-alt</li>
    <li><i class="icon-beaker"></i> icon-beaker</li>
    <li><i class="icon-move-vertical"></i> icon-move-vertical</li>
    <li><i class="icon-move-horizontal"></i> icon-move-horizontal</li>
    <li><i class="icon-steering-wheel"></i> icon-steering-wheel</li>
    <li><i class="icon-volume-3"></i> icon-volume-3</li>
    <li><i class="icon-volume-mute"></i> icon-volume-mute</li>
    <li><i class="icon-play"></i> icon-play</li>
    <li><i class="icon-pause"></i> icon-pause</li>
    <li><i class="icon-stop"></i> icon-stop</li>
    <li><i class="icon-eject"></i> icon-eject</li>
    <li><i class="icon-first"></i> icon-first</li>
    <li><i class="icon-last"></i> icon-last</li>
    <li><i class="icon-play-alt"></i> icon-play-alt</li>
    <li><i class="icon-battery-empty"></i> icon-battery-empty</li>
    <li><i class="icon-battery-half"></i> icon-battery-half</li>
    <li><i class="icon-battery-full"></i> icon-battery-full</li>
    <li><i class="icon-battery-charging"></i> icon-battery-charging</li>
    <li><i class="icon-left-quote"></i> icon-left-quote</li>
    <li><i class="icon-right-quote"></i> icon-right-quote</li>
    <li><i class="icon-left-quote-alt"></i> icon-left-quote-alt</li>
    <li><i class="icon-right-quote-alt"></i> icon-right-quote-alt</li>
    <li><i class="icon-smiley"></i> icon-smiley</li>
    <li><i class="icon-umbrella"></i> icon-umbrella</li>
    <li><i class="icon-info-2"></i> icon-info-2</li>
    <li><i class="icon-chart-alt"></i> icon-chart-alt</li>
    <li><i class="icon-floppy"></i> icon-floppy</li>
    <li><i class="icon-at"></i> icon-at</li>
    <li><i class="icon-hash"></i> icon-hash</li>
    <li><i class="icon-pilcrow"></i> icon-pilcrow</li>
    <li><i class="icon-fullscreen-alt"></i> icon-fullscreen-alt</li>
    <li><i class="icon-fullscreen-exit-alt"></i> icon-fullscreen-exit-alt</li>
    <li><i class="icon-layers-alt"></i> icon-layers-alt</li>
    <li><i class="icon-layers"></i> icon-layers</li>
    <li><i class="icon-rainbow"></i> icon-rainbow</li>
    <li><i class="icon-air"></i> icon-air</li>
    <li><i class="icon-spin"></i> icon-spin</li>
    <li><i class="icon-auction"></i> icon-auction</li>
    <li><i class="icon-dollar"></i> icon-dollar</li>
    <li><i class="icon-dollar-2"></i> icon-dollar-2</li>
    <li><i class="icon-coins"></i> icon-coins</li>
    <li><i class="icon-file-2"></i> icon-file-2</li>
    <li><i class="icon-file-3"></i> icon-file-3</li>
    <li><i class="icon-file-4"></i> icon-file-4</li>
    <li><i class="icon-files"></i> icon-files</li>
    <li><i class="icon-phone-2"></i> icon-phone-2</li>
    <li><i class="icon-tablet"></i> icon-tablet</li>
    <li><i class="icon-monitor-2"></i> icon-monitor-2</li>
    <li><i class="icon-window"></i> icon-window</li>
    <li><i class="icon-tv"></i> icon-tv</li>
    <li><i class="icon-camera-3"></i> icon-camera-3</li>
    <li><i class="icon-image"></i> icon-image</li>
    <li><i class="icon-open"></i> icon-open</li>
    <li><i class="icon-sale"></i> icon-sale</li>
    <li><i class="icon-direction"></i> icon-direction</li>
    <li><i class="icon-medal"></i> icon-medal</li>
    <li><i class="icon-medal-2"></i> icon-medal-2</li>
    <li><i class="icon-satellite"></i> icon-satellite</li>
    <li><i class="icon-discout"></i> icon-discout</li>
    <li><i class="icon-barcode"></i> icon-barcode</li>
    <li><i class="icon-ticket"></i> icon-ticket</li>
    <li><i class="icon-shipping"></i> icon-shipping</li>
    <li><i class="icon-globe"></i> icon-globe</li>
    <li><i class="icon-anchor"></i> icon-anchor</li>
    <li><i class="icon-pop-out"></i> icon-pop-out</li>
    <li><i class="icon-pop-in"></i> icon-pop-in</li>
    <li><i class="icon-resize"></i> icon-resize</li>
    <li><i class="icon-battery-2"></i> icon-battery-2</li>
    <li><i class="icon-battery-3"></i> icon-battery-3</li>
    <li><i class="icon-battery-4"></i> icon-battery-4</li>
    <li><i class="icon-battery-5"></i> icon-battery-5</li>
    <li><i class="icon-tools"></i> icon-tools</li>
    <li><i class="icon-alarm-2"></i> icon-alarm-2</li>
    <li><i class="icon-alarm-cancel"></i> icon-alarm-cancel</li>
    <li><i class="icon-alarm-clock"></i> icon-alarm-clock</li>
    <li><i class="icon-chronometer"></i> icon-chronometer</li>
    <li><i class="icon-ruler"></i> icon-ruler</li>
    <li><i class="icon-lamp"></i> icon-lamp</li>
    <li><i class="icon-lamp-2"></i> icon-lamp-2</li>
    <li><i class="icon-scissors"></i> icon-scissors</li>
    <li><i class="icon-volume-4"></i> icon-volume-4</li>
    <li><i class="icon-volume-5"></i> icon-volume-5</li>
    <li><i class="icon-volume-6"></i> icon-volume-6</li>
    <li><i class="icon-zip"></i> icon-zip</li>
    <li><i class="icon-zip-2"></i> icon-zip-2</li>
    <li><i class="icon-play-2"></i> icon-play-2</li>
    <li><i class="icon-pause-2"></i> icon-pause-2</li>
    <li><i class="icon-record"></i> icon-record</li>
    <li><i class="icon-stop-2"></i> icon-stop-2</li>
    <li><i class="icon-next"></i> icon-next</li>
    <li><i class="icon-previous"></i> icon-previous</li>
    <li><i class="icon-first-2"></i> icon-first-2</li>
    <li><i class="icon-last-2"></i> icon-last-2</li>
    <li><i class="icon-arrow-left-4"></i> icon-arrow-left-4</li>
    <li><i class="icon-arrow-down-4"></i> icon-arrow-down-4</li>
    <li><i class="icon-arrow-up-4"></i> icon-arrow-up-4</li>
    <li><i class="icon-arrow-right-4"></i> icon-arrow-right-4</li>
    <li><i class="icon-arrow-right-4"></i> icon-arrow-right-4</li>
    <li><i class="icon-arrow-left-5"></i> icon-arrow-left-5</li>
    <li><i class="icon-arrow-down-5"></i> icon-arrow-down-5</li>
    <li><i class="icon-arrow-up-5"></i> icon-arrow-up-5</li>
    <li><i class="icon-arrow-right-5"></i> icon-arrow-right-5</li>
    <li><i class="icon-cc"></i> icon-cc</li>
    <li><i class="icon-cc-by"></i> icon-cc-by</li>
    <li><i class="icon-cc-nc"></i> icon-cc-nc</li>
    <li><i class="icon-cc-nc-eu"></i> icon-cc-nc-eu</li>
    <li><i class="icon-cc-nc-jp"></i> icon-cc-nc-jp</li>
    <li><i class="icon-cc-sa"></i> icon-cc-sa</li>
    <li><i class="icon-cc-nd"></i> icon-cc-nd</li>
    <li><i class="icon-cc-pd"></i> icon-cc-pd</li>
    <li><i class="icon-cc-zero"></i> icon-cc-zero</li>
    <li><i class="icon-cc-share"></i> icon-cc-share</li>
    <li><i class="icon-cc-share-2"></i> icon-cc-share-2</li>
    <li><i class="icon-cycle"></i> icon-cycle</li>
    <li><i class="icon-stop-3"></i> icon-stop-3</li>
    <li><i class="icon-stats-2"></i> icon-stats-2</li>
    <li><i class="icon-stats-3"></i> icon-stats-3</li>
    </ol>
    <div class="indent"></div>

    <h2 class="fg-amber" id="_forms">Forms</h2>
    <div class="example">
        <form>
            <fieldset>
                <legend>Legend</legend>
                <lable>Label name</lable>
                <div class="input-control text" data-role="input-control">
                    <input type="text" placeholder="type text">
                    <button class="btn-clear" tabindex="-1"></button>
                </div>
                <lable>Label name</lable>
                <div class="input-control password" data-role="input-control">
                    <input type="password" placeholder="type password" >
                    <button class="btn-reveal" tabindex="-1"></button>
                </div>
                <div class="input-control checkbox" data-role="input-control">
                    <label>
                        <input type="checkbox" checked />
                        <span class="check"></span>
                        Check me out
                    </label>
                </div>

                <div>
                    <div class="input-control radio default-style" data-role="input-control">
                        <label>
                            <input type="radio" name="r1" checked />
                            <span class="check"></span>
                            R1
                        </label>
                    </div>
                    <div class="input-control radio  default-style" data-role="input-control">
                        <label>
                            <input type="radio" name="r1" />
                            <span class="check"></span>
                            R2
                        </label>
                    </div>
                </div>

                <input type="submit" value="Submit">
            </fieldset>
        </form>
    </div>
    <div class="indent"></div>
    <h2 class="fg-amber">Checkboxes</h2>
    <div class="example">
        <div class="input-control checkbox margin10" data-role="input-control">
            <label>
                <input type="checkbox" />
                <span class="check"></span>
                Check me out
            </label>
        </div>

        <div class="input-control checkbox margin10" data-role="input-control">
            <label>
                <input type="checkbox" checked/>
                <span class="check"></span>
                Check me out
            </label>
        </div>

        <div class="input-control checkbox margin10" data-role="input-control">
            <label>
                Check me out
                <input type="checkbox" disabled/>
                <span class="check"></span>
            </label>
        </div>

        <div class="input-control checkbox margin10" data-role="input-control">
            <label>
                Check me out
                <input type="checkbox" disabled checked/>
                <span class="check"></span>
            </label>
        </div>

        <div class="input-control checkbox margin10" data-role="input-control">
            <label>
                Intermediate
                <input type="checkbox" data-show="intermediate"/>
                <span class="check"></span>
            </label>
        </div>

        <div class="input-control checkbox margin10" data-role="input-control">
            <label>
                Intermediate
                <input type="checkbox" data-show="intermediate" disabled/>
                <span class="check"></span>
            </label>
        </div>
    </div>
    <div class="indent"></div>
    <h2 class="fg-amber">Radio buttons</h2>
    <div class="example">
        <div class="input-control radio margin10" data-role="input-control">
            <label>
                Check me out
                <input type="radio" name="r1" checked />
                <span class="check"></span>
            </label>
        </div>
        <div class="input-control radio margin10" data-role="input-control">
            <label>
                Check me out
                <input type="radio" name="r1" />
                <span class="check"></span>
            </label>
        </div>
        <div class="input-control radio margin10" data-role="input-control">
            <label>
                Check me out
                <input type="radio" name="r1" disabled/>
                <span class="check"></span>
            </label>
        </div>
        <div class="input-control radio margin10" data-role="input-control">
            <label>
                Check me out
                <input type="radio" name="r2" disabled checked />
                <span class="check"></span>
            </label>
        </div>

        <div class="input-control radio default-style margin10" data-role="input-control">
            <label>
                Check me out
                <input type="radio" name="r3" checked />
                <span class="check"></span>
            </label>
        </div>
        <div class="input-control radio default-style margin10" data-role="input-control">
            <label>
                Check me out
                <input type="radio" name="r3" />
                <span class="check"></span>
            </label>
        </div>
        <div class="input-control radio default-style margin10" data-role="input-control">
            <label>
                Check me out
                <input type="radio" name="r3" disabled/>
                <span class="check"></span>
            </label>
        </div>
        <div class="input-control radio default-style margin10" data-role="input-control">
            <label>
                Check me out
                <input type="radio" name="r4" disabled checked />
                <span class="check"></span>
            </label>
        </div>
    </div>
    <div class="indent"></div>
    <h2 class="fg-amber">Switch control</h2>
    <div class="example">
        <div class="input-control switch margin10" data-role="input-control">
            <label>
                Switch me
                <input type="checkbox" checked/>
                <span class="check"></span>
            </label>
        </div>

        <div class="input-control switch margin10" data-role="input-control">
            <label>
                Switch me
                <input type="checkbox"/>
                <span class="check"></span>
            </label>
        </div>

        <div class="input-control switch margin10" data-role="input-control">
            <label>
                Switch me
                <input type="checkbox" disabled/>
                <span class="check"></span>
            </label>
        </div>

        <div class="input-control switch margin10" data-role="input-control">
            <label>
                Switch me
                <input type="checkbox" disabled checked/>
                <span class="check"></span>
            </label>
        </div>
    </div>
    <div class="indent"></div>
    <h2 class="fg-amber">Input controls</h2>
    <h3>Input text</h3>
    <div class="example">
        <form>
            <div class="input-control text" data-role="input-control">
                <input type="text" value="" placeholder="input text"/>
                <button class="btn-clear"></button>
            </div>
            <br />
            <div class="input-control text" data-role="input-control">
                <input type="text" value="disabled input" disabled/>
                <button class="btn-clear"></button>
            </div>
        </form>
    </div>
    <h3>Input password</h3>
    <div class="example">
        <form>
            <div class="input-control password" data-role="input-control">
                <input type="password" value="" placeholder="input password"/>
                <button class="btn-reveal"></button>
            </div>
        </form>
    </div>
    <h3>Select</h3>
    <div class="example">
        <form>
            <div class="input-control select" data-role="input-control">
                <select>
                    <option>Value 1</option>
                    <option>Value 2</option>
                    <option>Value 3</option>
                </select>
            </div>
            <br />
            <div class="input-control select" data-role="input-control">
                <select multiple>
                    <option>Value 1</option>
                    <option>Value 2</option>
                    <option>Value 3</option>
                    <option>Value 3</option>
                </select>
            </div>
        </form>
    </div>
    <h3>Textarea</h3>
    <div class="example">
        <form>
            <div class="input-control textarea" data-role="input-control">
                <textarea></textarea>
            </div>
        </form>
    </div>
    <h3 id="_validation">Input validation states</h3>
    <div class="example">
        <form>
            <div class="input-control text warning-state" data-role="input-control">
                <input type="text" value="warning state">
            </div>

            <div class="input-control text error-state" data-role="input-control">
                <input type="text" value="error state">
            </div>

            <div class="input-control text info-state" data-role="input-control">
                <input type="text" value="info state">
            </div>

            <div class="input-control text" data-role="input-control">
                <input type="text" value="success state" data-state="success">
            </div>
        </form>
    </div>
    <h3 id="_search">Search form</h3>
    <div class="example">
        <form>
            <div class="input-control text" data-role="input-control">
                <input type="text">
                <button class="btn-search"></button>
            </div>
        </form>
    </div>
    <h3 id="_file">Input file</h3>
    <div class="example">
        <form>
            <div class="input-control file" data-role="input-control">
                <input type="file">
                <button class="btn-file"></button>
            </div>
        </form>
    </div>
    <div class="example">
        <form>
            <div class="grid">
                <div class="row">
                    <div class="span10">
                        <table class="table striped">
                            <tr>
                                <td class="span4 text-right" style="vertical-align:middle"><strong>Login:</strong></td>
                                <td>
                                    <div class="input-control text nbm" data-role="input-control">
                                        <input type="text" value="">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="span4 text-right" style="vertical-align:middle"><strong>Password:</strong></td>
                                <td>
                                    <div class="input-control password nbm" data-role="input-control">
                                        <input type="password">
                                        <button class="btn-reveal" tabindex="-1" type="button"></button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="span4 text-right" style="vertical-align:middle"><strong>Phone:</strong></td>
                                <td>
                                    <div class="input-control select span2 nbm" data-role="input-control" style="margin-right: 10px; margin-top: 2px">
                                        <select name="phone_code"><option value="+0">+0</option><option value="+1">+1</option><option value="+1242">+1242</option><option value="+1246">+1246</option><option value="+1264">+1264</option><option value="+1284">+1284</option><option value="+1441">+1441</option><option value="+1649">+1649</option><option value="+1664">+1664</option><option value="+1684">+1684</option><option value="+1784">+1784</option><option value="+20">+20</option><option value="+212">+212</option><option value="+213">+213</option><option value="+216">+216</option><option value="+218">+218</option><option value="+220">+220</option><option value="+221">+221</option><option value="+222">+222</option><option value="+223">+223</option><option value="+224">+224</option><option value="+225">+225</option><option value="+227">+227</option><option value="+229">+229</option><option value="+230">+230</option><option value="+231">+231</option><option value="+232">+232</option><option value="+233">+233</option><option value="+234">+234</option><option value="+235">+235</option><option value="+236">+236</option><option value="+237">+237</option><option value="+239">+239</option><option value="+240">+240</option><option value="+242">+242</option><option value="+243">+243</option><option value="+244">+244</option><option value="+246">+246</option><option value="+247">+247</option><option value="+248">+248</option><option value="+249">+249</option><option value="+250">+250</option><option value="+251">+251</option><option value="+252">+252</option><option value="+253">+253</option><option value="+254">+254</option><option value="+255">+255</option><option value="+256">+256</option><option value="+258">+258</option><option value="+260">+260</option><option value="+261">+261</option><option value="+263">+263</option><option value="+264">+264</option><option value="+265">+265</option><option value="+266">+266</option><option value="+267">+267</option><option value="+268">+268</option><option value="+27">+27</option><option value="+290">+290</option><option value="+297">+297</option><option value="+299">+299</option><option value="+30">+30</option><option value="+31">+31</option><option value="+32">+32</option><option value="+33">+33</option><option value="+34">+34</option><option value="+350">+350</option><option value="+351">+351</option><option value="+352">+352</option><option value="+353">+353</option><option value="+354">+354</option><option value="+355">+355</option><option value="+356">+356</option><option value="+357">+357</option><option value="+358">+358</option><option value="+35818">+35818</option><option value="+359">+359</option><option value="+36">+36</option><option value="+370">+370</option><option value="+371">+371</option><option value="+372">+372</option><option value="+373">+373</option><option value="+374">+374</option><option value="+375">+375</option><option value="+376">+376</option><option value="+377">+377</option><option value="+378">+378</option><option value="+38">+38</option><option value="+380" selected="">+380</option><option value="+382">+382</option><option value="+386">+386</option><option value="+387">+387</option><option value="+389">+389</option><option value="+39">+39</option><option value="+40">+40</option><option value="+41">+41</option><option value="+42">+42</option><option value="+421">+421</option><option value="+423">+423</option><option value="+43">+43</option><option value="+44">+44</option><option value="+45">+45</option><option value="+46">+46</option><option value="+47">+47</option><option value="+48">+48</option><option value="+49">+49</option><option value="+500">+500</option><option value="+501">+501</option><option value="+502">+502</option><option value="+503">+503</option><option value="+504">+504</option><option value="+505">+505</option><option value="+506">+506</option><option value="+507">+507</option><option value="+509">+509</option><option value="+51">+51</option><option value="+52">+52</option><option value="+53">+53</option><option value="+54">+54</option><option value="+55">+55</option><option value="+56">+56</option><option value="+57">+57</option><option value="+58">+58</option><option value="+590">+590</option><option value="+591">+591</option><option value="+593">+593</option><option value="+594">+594</option><option value="+595">+595</option><option value="+596">+596</option><option value="+597">+597</option><option value="+598">+598</option><option value="+60">+60</option><option value="+61">+61</option><option value="+61891">+61891</option><option value="+62">+62</option><option value="+63">+63</option><option value="+64">+64</option><option value="+65">+65</option><option value="+66">+66</option><option value="+672">+672</option><option value="+673">+673</option><option value="+677">+677</option><option value="+679">+679</option><option value="+683">+683</option><option value="+685">+685</option><option value="+686">+686</option><option value="+687">+687</option><option value="+688">+688</option><option value="+690">+690</option><option value="+691">+691</option><option value="+7">+7</option><option value="+81">+81</option><option value="+82">+82</option><option value="+84">+84</option><option value="+850">+850</option><option value="+852">+852</option><option value="+856">+856</option><option value="+86">+86</option><option value="+876">+876</option><option value="+880">+880</option><option value="+886">+886</option><option value="+90">+90</option><option value="+91">+91</option><option value="+92">+92</option><option value="+93">+93</option><option value="+94">+94</option><option value="+960">+960</option><option value="+961">+961</option><option value="+962">+962</option><option value="+963">+963</option><option value="+964">+964</option><option value="+965">+965</option><option value="+966">+966</option><option value="+968">+968</option><option value="+969">+969</option><option value="+971">+971</option><option value="+972">+972</option><option value="+973">+973</option><option value="+974">+974</option><option value="+976">+976</option><option value="+977">+977</option><option value="+98">+98</option><option value="+993">+993</option><option value="+994">+994</option><option value="+995">+995</option><option value="+996">+996</option><option value="+998">+998</option></select>
                                    </div>
                                    <div class="input-control text span3 nbm" data-role="input-control">
                                        <input type="text" placeholder="">
                                        <button class="btn-clear" tabindex="-1" type="button"></button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="span4 text-right" style="vertical-align:middle"></td>
                                <td>
                                    <div class="input-control checkbox" data-role="input-control">
                                        <label>
                                            <input type="checkbox" checked="">
                                            <span class="check"></span>
                                            Remember me
                                        </label>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="span4 text-right" style="vertical-align:middle"></td>
                                <td>
                                    <input type="submit" class="inverse" value="Enter">
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="indent"></div>
<div class="indent"></div>
<h2 class="fg-amber">Sidebar</h2>
<div class="example">
    <nav class="sidebar span3">
        <ul>
            <li class="title">Items Group 1</li>
            <li class="active"><a href="#"><i class="icon-home"></i>Dashboard</a></li>
            <li class="stick bg-red"><a href="#"><i class="icon-cog"></i>Layouts</a></li>
            <li class="stick bg-yellow">
                <a class="dropdown-toggle" href="#"><i class="icon-tree-view"></i>Sub menu</a>
                <ul class="dropdown-menu" data-role="dropdown">
                    <li><a href="">Subitem 1</a></li>
                    <li><a href="">Subitem 2</a></li>
                    <li><a href="">Subitem 3</a></li>
                    <li class="divider"></li>
                    <li><a href="">Subitem 4</a></li>
                    <li class="disabled"><a href="">Subitem 4</a></li>
                </ul>
            </li>
            <li class="stick bg-green"><a href="#">Thread item</a></li>
            <li class="disabled"><a href="#">Disabled item</a></li>

            <li class="title">Items Group 2</li>
            <li><a href="#">Other Item 1</a></li>
            <li><a href="#">Other item 2</a></li>
            <li><a href="#">Other item 3</a></li>
            <li>
                <a class="dropdown-toggle" href="#">Sub menu 2</a>
                <ul class="dropdown-menu" data-role="dropdown">
                    <li><a href="">Subitem 1</a></li>
                    <li><a href="">Subitem 2</a></li>
                    <li><a href="">Subitem 3</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</div>
<div class="indent"></div>
<h2 class="fg-amber">Tab Control</h2>
<div class="example">
    <div class="tab-control" data-role="tab-control">
        <ul class="tabs">
            <li class="active"><a href="#_page_1_">Tab 1</a></li>
            <li><a href="#_page_2_">Other Tab</a></li>
            <li><a href="#_page_3_"><i class="icon-rocket"></i></a></li>
            <li class="place-right"><a href="#_page_5_"><i class="icon-heart"></i></a></li>
            <li class="place-right"><a href="#_page_4_"><i class="icon-cog"></i></a></li>
        </ul>

        <div class="frames">
            <div class="frame" id="_page_1_">
                <p>First Tab</p>
            </div>
            <div class="frame" id="_page_2_">
                <p>Second Tab</p>
            </div>
            <div class="frame" id="_page_3_">
                <p>Rocket Tab</p>
            </div>
            <div class="frame" id="_page_4_">
                <p>This tab placed right</p>
            </div>
            <div class="frame" id="_page_5_">
                <p>This tab also placed right</p>
            </div>
        </div>

    </div>
</div>
<div class="indent"></div>
<h2 class="fg-amber">Accordion</h2>
<div class="example">
<div class="tab-control" data-role="tab-control">
    <ul class="tabs">
        <li class="active"><a href="#tab1">Tab1</a></li>
        <li><a href="#tab2">Tab2</a></li>
    </ul>

    <div class="frames">
        <div class="frame clearfix" id="tab1">
            <div class="accordion span3 place-left margin10" data-role="accordion" data-closeany="false">
                <div class="accordion-frame">
                    <a class="heading" href="#">Item #1</a>
                    <div class="content">
                        <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</p>
                    </div>
                </div>
                <div class="accordion-frame">
                    <a class="heading" href="#">Item #2</a>
                    <div class="content">
                        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</p>
                    </div>
                </div>
                <div class="accordion-frame">
                    <a class="heading" href="#">Item #3</a>
                    <div class="content">
                        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</p>
                        <button class="primary">Activate the account</button>
                    </div>
                </div>
            </div>

            <div class="accordion with-marker span3 place-left margin10" data-role="accordion" data-closeany="false">
                <div class="accordion-frame">
                    <a class="heading" href="#">Item #1</a>
                    <div class="content">
                        <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</p>
                    </div>
                </div>
                <div class="accordion-frame">
                    <a class="heading" href="#">Item #2</a>
                    <div class="content">
                        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</p>
                    </div>
                </div>
                <div class="accordion-frame">
                    <a class="heading" href="#">Item #3</a>
                    <div class="content">
                        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</p>
                        <button class="primary">Activate the account</button>
                    </div>
                </div>
            </div>

            <div class="accordion with-marker span3 place-left margin10" data-role="accordion" data-closeany="false">
                <div class="accordion-frame">
                    <a class="heading bg-lightBlue fg-white" href="#">Item #1</a>
                    <div class="content">
                        <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</p>
                    </div>
                </div>
                <div class="accordion-frame">
                    <a class="heading text-right ribbed-green fg-white" href="#">Item #2</a>
                    <div class="content">
                        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</p>
                    </div>
                </div>
                <div class="accordion-frame">
                    <a class="heading ribbed-red fg-white" href="#">Item #3</a>
                    <div class="content">
                        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</p>
                        <button class="primary">Activate the account</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="frame" id="tab2">tab2</div>
    </div>
</div>
<br />

<div class="accordion" data-role="accordion" data-closeany="true">
<div class="accordion-frame">
    <a class="active heading" href="#">Any components as content</a>
    <div class="content">
        <div class="grid">
            <div class="row">
                <div class="span3">
                    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</p>
                    <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p>
                    <ul>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                    </ul>
                    <a href="http://microsoft.com">Microsoft.com</a>
                </div>
                <div class="span3">
                    <form>
                        <fieldset>
                            <legend>Legend</legend>
                            <lable>Label name</lable>
                            <div class="input-control text" data-role="input-control">
                                <input type="text" placeholder="type text">
                                <button class="btn-clear" tabindex="-1"></button>
                            </div>
                            <lable>Label name</lable>
                            <div class="input-control password" data-role="input-control">
                                <input type="password" placeholder="type password">
                                <button class="btn-reveal" tabindex="-1"></button>
                            </div>
                            <div class="input-control checkbox" data-role="input-control">
                                <label>
                                    <input type="checkbox" checked />
                                    <span class="check"></span>
                                    Check me out
                                </label>
                            </div>

                            <div>
                                <div class="input-control radio default-style" data-role="input-control">
                                    <label>
                                        <input type="radio" name="r1" checked />
                                        <span class="check"></span>
                                        R1
                                    </label>
                                </div>
                                <div class="input-control radio  default-style" data-role="input-control">
                                    <label>
                                        <input type="radio" name="r1" />
                                        <span class="check"></span>
                                        R2
                                    </label>
                                </div>
                            </div>

                            <input type="submit" value="Submit">
                        </fieldset>
                    </form>
                </div>
                <div class="span4">
                    <div class="tab-control" data-role="tab-control">
                        <ul class="tabs">
                            <li class="active"><a href="#_page_1">Tab 1</a></li>
                            <li><a href="#_page_2">Other Tab</a></li>
                            <li><a href="#_page_3"><i class="icon-rocket"></i></a></li>
                            <li class="place-right"><a href="#_page_5"><i class="icon-heart"></i></a></li>
                            <li class="place-right"><a href="#_page_4"><i class="icon-cog"></i></a></li>
                        </ul>

                        <div class="frames">
                            <div class="frame" id="_page_1">
                                <p>First Tab</p>
                            </div>
                            <div class="frame" id="_page_2">
                                <p>Second Tab</p>
                            </div>
                            <div class="frame" id="_page_3">
                                <p>Rocket Tab</p>
                            </div>
                            <div class="frame" id="_page_4">
                                <p>This tab placed right</p>
                            </div>
                            <div class="frame" id="_page_5">
                                <p>This tab also placed right</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="accordion-frame">
    <a class="heading" href="#">Accordion in accordion</a>
    <div class="content clearfix">
        <div class="accordion span3 place-left margin10" data-role="accordion" data-closeany="false">
            <div class="accordion-frame">
                <a class="heading" href="#">Item #1</a>
                <div class="content">
                    <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</p>
                </div>
            </div>
            <div class="accordion-frame">
                <a class="heading" href="#">Item #2</a>
                <div class="content">
                    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</p>
                </div>
            </div>
            <div class="accordion-frame">
                <a class="heading" href="#">Item #3</a>
                <div class="content">
                    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</p>
                    <button class="primary">Activate the account</button>
                </div>
            </div>
        </div>

        <div class="accordion span3 place-left margin10" data-role="accordion">
            <div class="accordion-frame">
                <a class="heading" href="#">Item #1</a>
                <div class="content">
                    <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</p>
                </div>
            </div>
            <div class="accordion-frame">
                <a class="heading" href="#">Item #2</a>
                <div class="content">
                    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</p>
                </div>
            </div>
            <div class="accordion-frame">
                <a class="heading" href="#">Item #3</a>
                <div class="content">
                    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</p>
                    <button class="primary">Activate the account</button>
                </div>
            </div>
        </div>

        <div class="accordion span3 place-left margin10" data-role="accordion">
            <div class="accordion-frame">
                <a class="heading" href="#">Item #1</a>
                <div class="content">
                    <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</p>
                </div>
            </div>
            <div class="accordion-frame">
                <a class="heading" href="#">Item #2</a>
                <div class="content">
                    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</p>
                </div>
            </div>
            <div class="accordion-frame">
                <a class="heading" href="#">Item #3</a>
                <div class="content">
                    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</p>
                    <button class="primary">Activate the account</button>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="accordion-frame">
    <a class="heading" href="#">Custom accordion item heading</a>
    <div class="content clearfix">
        <div class="accordion span3 place-left margin10" data-role="accordion">
            <div class="accordion-frame">
                <a class="active heading bg-red fg-white" href="#">Item #1</a>
                <div class="content">
                    <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</p>
                </div>
            </div>
            <div class="accordion-frame">
                <a class="heading bg-yellow fg-white" href="#">Item #2</a>
                <div class="content">
                    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</p>
                </div>
            </div>
            <div class="accordion-frame">
                <a class="heading bg-green fg-white" href="#">Item #3</a>
                <div class="content">
                    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</p>
                    <button class="primary">Activate the account</button>
                </div>
            </div>
        </div>

        <div class="accordion span3 place-left margin10" data-role="accordion">
            <div class="accordion-frame">
                <a class="heading bg-dark fg-white text-right" href="#">Item #1</a>
                <div class="content">
                    <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</p>
                </div>
            </div>
            <div class="accordion-frame">
                <a class="active heading bg-dark fg-white text-right" href="#">Item #2</a>
                <div class="content">
                    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</p>
                </div>
            </div>
            <div class="accordion-frame">
                <a class="heading bg-dark fg-white text-right" href="#">Item #3</a>
                <div class="content">
                    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</p>
                    <button class="primary">Activate the account</button>
                </div>
            </div>
        </div>

        <div class="accordion span3 place-left margin10" data-role="accordion">
            <div class="accordion-frame">
                <a class="heading bg-cyan fg-white" href="#"><i class="icon-rocket"></i> Item #1</a>
                <div class="content">
                    <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</p>
                </div>
            </div>
            <div class="accordion-frame">
                <a class="heading bg-cyan fg-white" href="#"><i class="icon-cog"></i> Item #2</a>
                <div class="content">
                    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</p>
                </div>
            </div>
            <div class="accordion-frame">
                <a class="heading bg-cyan fg-white" href="#"><i class="icon-cart"></i> Item #3</a>
                <div class="content">
                    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.</p>
                    <button class="primary">Activate the account</button>
                </div>
            </div>
        </div>

    </div>
</div>
</div>
</div>
<div class="indent"></div>
<h2 class="fg-amber">Rating</h2>
<div class="example">
    <div class="rating large" data-static="false" data-score="3" data-stars="5" data-role="rating" data-show-score="true" data-score-hint="Rating: "></div>
    <div id="rating_1" class="fg-green"></div>
    <div class="rating small fg-red" data-static="false" data-score="3" data-stars="5" data-role="rating" data-show-score="true" data-score-hint="Value: "></div>
    <script>
        $(function(){
            $("#rating_1").rating({
                static: false,
                score: 2,
                stars: 5,
                showHint: true,
                showScore: true,
                click: function(value, rating){
                    //alert("Rating clicked with value " + value);
                    rating.rate(value);
                }
            });
        });
    </script>
</div>
<div class="indent"></div>
<h2 class="fg-amber">Progress Bar</h2>
<div class="example">
    <div class="progress-bar small" data-role="progress-bar" data-value="10"></div>
    <div class="progress-bar" data-role="progress-bar" data-value="20" data-color="bg-green"></div>
    <div class="progress-bar large" data-role="progress-bar" data-value="50"></div>
</div>
<div class="example">
    <div class="progress-bar small" data-role="progress-bar" id="pb1"></div>
    <button class="button success" id="pb_start_btn">Start</button>
    <button class="button " id="pb_reset_btn">Reset</button>
    <script>
        $(function(){
            var pb = $('#pb1').progressbar();
            var progress = 0;
            $("#pb_start_btn").on('click', function(){
                var interval = setInterval(
                        function(){
                            pb.progressbar('value', (++progress));
                            if (progress == 100) window.clearInterval(interval);
                        }, 100);
            });

            $("#pb_reset_btn").on('click', function(){
                progress = 0;
                pb.progressbar('value', progress);
            });
        });
    </script>
</div>
<div class="indent"></div>
<h2 class="fg-amber">Slider</h2>
<div class="example">
    <div class="slider" id="s1" data-role="slider" data-position="25" data-accuracy="0"></div>
    <div class="slider" id="slider_1" data-role="slider"></div>
    <div class="slider" data-role="slider" data-position="0" data-accuracy="0" data-colors="blue, red, yellow, green"></div>
    <script>
        $(function(){
            $("#slider_1").slider();
        });
    </script>
</div>
<div class="example clearfix">
    <div class="slider vertical place-left" data-role="slider" data-position="20" data-accuracy="0"></div>
    <div class="slider vertical place-left" data-role="slider" data-position="0" data-accuracy="20"></div>
    <div class="slider vertical place-left" data-role="slider" data-position="40" data-accuracy="0" data-color="green"></div>
    <div class="slider vertical place-left" data-role="slider" data-position="70" data-accuracy="0" data-color="#f00"></div>
    <div class="slider vertical place-left" data-role="slider" data-position="70" data-accuracy="0" data-color="black" data-complete-color="blue" data-marker-color="yellow"></div>
    <div class="slider vertical place-left hint-left" data-show-hint="true" data-role="slider" data-position="0" data-accuracy="0" data-colors="blue, red, yellow, green"></div>
    <div class="slider vertical place-left" data-role="slider" data-show-hint="true"></div>
    <div class="slider vertical place-left permanent-hint" data-role="slider" data-show-hint="true"></div>
</div>
<div class="example">
    <br />
    <div class="slider" data-role="slider" data-position="20" data-accuracy="0" data-show-hint="true"></div>
    <br />
    <div class="slider permanent-hint" data-role="slider" data-position="70" data-accuracy="0" data-show-hint="true"></div>
    <br />
    <br />
    <br />
    <div class="slider hint-bottom" data-role="slider" data-position="20" data-accuracy="0" data-show-hint="true"></div>
    <br />
    <div id="s2" class="slider permanent-hint hint-bottom" data-role="slider" data-position="20" data-accuracy="0" data-show-hint="true"></div>
</div>
<div class="indent"></div>
<h2 class="fg-amber">Carousel</h2>
<div class="example">

    <div class="grid">
        <div class="row">
            <div class="span5">
                <div class="carousel" id="carousel1">
                    <div class="slide">
                        <img src="images/1.jpg" class="cover1" />
                    </div>

                    <div class="slide">
                        <img src="images/2.jpg" class="cover1" />
                    </div>

                    <div class="slide">
                        <img src="images/3.jpg" class="cover1"/>
                    </div>

                    <a class="controls left"><i class="icon-arrow-left-3"></i></a>
                    <a class="controls right"><i class="icon-arrow-right-3"></i></a>
                </div>
                <script>
                    $(function(){
                        $("#carousel1").carousel({
                            height: 200
                        });
                    })
                </script>
            </div>
            <div class="span5">
                <div class="carousel" id="carousel2">
                    <div class="slide">
                        <img src="images/1.jpg" class="cover1" />
                    </div>

                    <div class="slide">
                        <img src="images/2.jpg" class="cover1" />
                    </div>

                    <div class="slide">
                        <img src="images/3.jpg" class="cover1"/>
                    </div>
                </div>
                <script>
                    $(function(){
                        $("#carousel2").carousel({
                            height: 200,
                            effect: 'fade',
                            markers: {
                                show: true,
                                type: 'square',
                                position: 'bottom-right'
                            }
                        });
                    })
                </script>
            </div>
        </div>
    </div>

</div>
<div class="indent"></div>
<h2 class="fg-amber">TreeView</h2>
<div class="example">
    <ul class="treeview" data-role="treeview">
        <li class="node">
            <a href="#">sergey@pimenov.com.ua</a>
            <ul>
                <li class="active"><a href="#">Inbox</a></li>
                <li><a href="#">Outbox</a></li>
                <li><a href="#">Drafts</a></li>
                <li><a href="#">Rss-channels</a></li>
                <li><a href="#">Trash <span class="value">[5]</span></a></li>
                <li class="node">
                    <a href="#">subnode</a>
                    <ul>
                        <li><a href="#">Inbox</a></li>
                        <li><a href="#">Outbox</a></li>
                        <li><a href="#">Drafts</a></li>
                        <li><a href="#">Rss-channels</a></li>
                        <li><a href="#">Trash</a></li>
                        <li class="node">
                            <a href="#">subnode 2</a>
                            <ul>
                                <li><a href="#">Inbox</a></li>
                                <li><a href="#">Outbox</a></li>
                                <li><a href="#">Drafts</a></li>
                                <li><a href="#">Rss-channels</a></li>
                                <li><a href="#">Trash</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="node">
            <a href="#">support@metroui.net</a>
            <ul>
                <li><a href="#">Inbox</a></li>
                <li><a href="#">Outbox</a></li>
                <li><a href="#">Drafts</a></li>
                <li><a href="#">Rss-channels</a></li>
                <li><a href="#">Trash</a></li>
            </ul>
        </li>
        <li class="node collapsed">
            <a href="#">info@metroui.net</a>
            <ul>
                <li><a href="#">Inbox</a></li>
                <li><a href="#">Outbox</a></li>
                <li><a href="#">Drafts</a></li>
                <li><a href="#">Rss-channels</a></li>
                <li><a href="#">Trash</a></li>
            </ul>
        </li>
    </ul>
</div>
<div class="indent"></div>
<h2 class="fg-amber">ListView</h2>
<div class="example">
    <div class="grid fluid">
        <div class="row">
            <div class="span5">
                <div class="listview">
                    <a href="#" class="list">
                        <div class="list-content">
                            <img src="images/excel2013icon.png" class="icon">
                            <div class="data">
                                <span class="list-title">Excel 2013</span>
                                <div class="rating small no-margin" data-role="rating" data-stars="5"></div>
                                <span class="list-remark">Price: $1</span>
                            </div>
                        </div>
                    </a>
                    <a href="#" class="list bg-lightBlue fg-white">
                        <div class="list-content">
                            <img src="images/word2013icon.png" class="icon">
                            <div class="data">
                                <span class="list-title">Word 2013</span>
                                <div class="rating small no-margin fg-yellow" data-score="4" data-role="rating" data-stars="5"></div>
                                <span class="list-remark">Price: $1</span>
                            </div>
                        </div>
                    </a>
                    <a href="#" class="list selected">
                        <div class="list-content">
                            <img src="images/onenote2013icon.png" class="icon">
                            <div class="data">
                                <span class="list-title">Word 2013</span>
                                <div class="progress-bar small" data-role="progress-bar" data-value="75"></div>
                                <span class="list-remark">Download...75%</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <div class="span5">
                <div class="listview small">
                    <a href="#" class="list">
                        <div class="list-content">
                            <img src="images/excel2013icon.png" class="icon">
                            <div class="data">
                                <span class="list-title">Excel 2013</span>
                                <div class="rating small no-margin" data-role="rating" data-stars="5"></div>
                            </div>
                        </div>
                    </a>
                    <a href="#" class="list bg-lightBlue fg-white">
                        <div class="list-content">
                            <img src="images/word2013icon.png" class="icon">
                            <div class="data">
                                <span class="list-title">Word 2013</span>
                                <div class="rating small no-margin fg-yellow" data-score="4" data-role="rating" data-stars="5"></div>
                            </div>
                        </div>
                    </a>
                    <a href="#" class="list selected">
                        <div class="list-content">
                            <img src="images/onenote2013icon.png" class="icon">
                            <div class="data">
                                <span class="list-title">Word 2013</span>
                                <div class="progress-bar small" data-role="progress-bar" data-value="75"></div>
                            </div>
                        </div>
                    </a>
                    <a href="#" class="list shadow">
                        <div class="list-content">
                            <img src="images/excel2013icon.png" class="icon">
                            <div class="data">
                                <span class="list-title">Excel 2013</span>
                                <div class="rating small no-margin" data-role="rating" data-stars="5"></div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <div class="span4">
            </div>

        </div>
    </div>
</div>
<div class="example">
    <div class="grid fluid">
        <div class="row">
            <div class="span5">
                <h2>Simple list</h2>
                <div class="listview-outlook" data-role="listview">
                    <a class="list marked" href="#">
                        <div class="list-content">
                            <span class="list-title">subscribe@metroui.net</span>
                            <span class="list-subtitle">MetroUI: News on 26/10/2013</span>
                            <span class="list-remark">Hello friend! Newest for Metro UI CSS</span>
                        </div>
                    </a>
                    <a class="list" href="#">
                        <div class="list-content">
                            <span class="list-title">subscribe@metroui.net</span>
                            <span class="list-subtitle">MetroUI: News on 26/10/2013</span>
                            <span class="list-remark">Hello friend! Newest for Metro UI CSS</span>
                        </div>
                    </a>
                    <a class="list" href="#">
                        <div class="list-content">
                            <span class="list-title">subscribe@metroui.net</span>
                            <span class="list-subtitle">MetroUI: News on 26/10/2013</span>
                            <span class="list-remark">Hello friend! Newest for Metro UI CSS</span>
                        </div>
                    </a>
                    <a class="list" href="#">
                        <div class="list-content">
                            <span class="list-title">subscribe@metroui.net</span>
                            <span class="list-subtitle">MetroUI: News on 26/10/2013</span>
                            <span class="list-remark">Hello friend! Newest for Metro UI CSS</span>
                        </div>
                    </a>
                    <a class="list" href="#">
                        <div class="list-content">
                            <span class="list-title">subscribe@metroui.net</span>
                            <span class="list-subtitle">MetroUI: News on 26/10/2013</span>
                            <span class="list-remark">Hello friend! Newest for Metro UI CSS</span>
                        </div>
                    </a>
                </div>
            </div>

            <div class="span1"></div>

            <div class="span5">
                <h2>Grouped list</h2>
                <div class="listview-outlook" data-role="listview">
                    <div class="list-group ">
                        <a href="" class="group-title">Today</a>
                        <div class="group-content">
                            <a class="list marked" href="#">
                                <div class="list-content">
                                    <span class="list-title">subscribe@metroui.net</span>
                                    <span class="list-subtitle">MetroUI: News on 26/10/2013</span>
                                    <span class="list-remark">Hello friend! Newest for Metro UI CSS</span>
                                </div>
                            </a>
                            <a class="list" href="#">
                                <div class="list-content">
                                    <span class="list-title">subscribe@metroui.net</span>
                                    <span class="list-subtitle">MetroUI: News on 26/10/2013</span>
                                    <span class="list-remark">Hello friend! Newest for Metro UI CSS</span>
                                </div>
                            </a>
                            <a class="list active" href="#">
                                <div class="list-content">
                                    <span class="list-title">subscribe@metroui.net</span>
                                    <span class="list-subtitle">MetroUI: News on 26/10/2013</span>
                                    <span class="list-remark">Hello friend! Newest for Metro UI CSS</span>
                                </div>
                            </a>
                            <a class="list" href="#">
                                <div class="list-content">
                                    <span class="list-title">subscribe@metroui.net</span>
                                    <span class="list-subtitle">MetroUI: News on 26/10/2013</span>
                                    <span class="list-remark">Hello friend! Newest for Metro UI CSS</span>
                                </div>
                            </a>
                        </div>
                    </div>

                    <div class="list-group collapsed">
                        <a href="" class="group-title">Yesterday</a>
                        <div class="group-content">
                            <a class="list" href="#">
                                <div class="list-content">
                                    <span class="list-title"><span class="place-right icon-flag-2 fg-red smaller"></span>subscribe@metroui.net</span>
                                    <span class="list-subtitle"><span class="place-right">1:51</span>MetroUI: News on 26/10/2013</span>
                                    <span class="list-remark">Hello friend! Newest for Metro UI CSS</span>
                                </div>
                            </a>
                            <a class="list" href="#">
                                <div class="list-content">
                                    <span class="list-title"><span class="place-right icon-flag-2 fg-green smaller"></span>subscribe@metroui.net</span>
                                    <span class="list-subtitle"><span class="place-right">1:51</span>MetroUI: News on 26/10/2013</span>
                                    <span class="list-remark">Hello friend! Newest for Metro UI CSS</span>
                                </div>
                            </a>
                            <a class="list" href="#">
                                <div class="list-content">
                                    <span class="list-title">subscribe@metroui.net</span>
                                    <span class="list-subtitle"><span class="place-right">1:51</span>MetroUI: News on 26/10/2013</span>
                                    <span class="list-remark">Hello friend! Newest for Metro UI CSS</span>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="indent"></div>
<h2 class="fg-amber">Hint</h2>
<div class="example">
    <div class="grid fluid">
        <div class="row">
            <div class="span3">
                <div class="text-center padding10 border" data-hint="Title|This is a hint for element. Hint can be written as html.">Hint on bottom</div>
            </div>
            <div class="span3">
                <div class="text-center padding10 border" data-hint-position="top" data-hint="Title|This is a hint for element. Hint can be written as html.">Hint on top</div>
            </div>
            <div class="span3">
                <div class="text-center padding10 border" data-hint-position="right" data-hint="Title|This is a hint for element. Hint can be written as html.">Hint on right</div>
            </div>
            <div class="span3">
                <div class="text-center padding10 border" data-hint-position="left" data-hint="Title|This is a hint for element. Hint can be written as html.">Hint on left</div>
            </div>
        </div>
    </div>
</div>
<div class="indent"></div>
<h2 class="fg-amber">Balloon</h2>
<div class="example">
    <div class="balloon left">
        <div class="padding20">
            Balloon is represent to create information or dialog UI. You can put inside any of elements.
        </div>
    </div>

    <div class="balloon right">
        <div class="tab-control padding20" data-role="tab-control">
            <p class="place-right tertiary-text">Comments are parsed with <a href="https://help.github.com/articles/github-flavored-markdown">GitHub Flavored Markdown</a></p>
            <ul class="tabs">
                <li class="active"><a href="#write">Write</a></li>
                <li><a href="#preview">Preview</a></li>
            </ul>

            <div class="frames">
                <div id="write" class="frame">
                    <textarea data-transform="input-control" placeholder="leave a comment"></textarea>
                </div>
                <div id="preview" class="frame">
                    This is preview :)
                </div>
            </div>
        </div>
    </div>

    <div class="balloon bottom">
        <div class="padding20">
            Balloon is represent to create information or dialog UI. You can put inside any of elements.
        </div>
    </div>

    <div class="balloon top">
        <div class="padding20">
            Balloon is represent to create information or dialog UI. You can put inside any of elements.
        </div>
    </div>
</div>
<div class="indent"></div>
<h2 class="fg-amber">Stepper</h2>
<div class="example">
    <ul class="stepper" data-role="stepper">
        <li class="complete" data-action="Step 1" data-description="Create document with HTML5 DOCTYPE"></li>
        <li class="" data-action="Step 2" data-description="Include <strong>metro-bootstrap.css</strong> in document head"></li>
        <li class="" data-action="Step 3" data-description="Include <strong>jquery.js, jquery.widget.js and metro-*.js</strong> in document head"></li>
        <li class="" data-action="Step 4" data-description="Create container with class <strong>metro</strong> for Metro UI CSS components"></li>
        <li class="" data-action="Step 5" data-description="Use markup for components, as described in the pages of this site"></li>
    </ul>
</div>
<div class="indent"></div>
<h2 class="fg-amber">Calendar</h2>
<div class="example">
    <div class="grid fluid">
        <div class="row">
            <div class="span4"><div class="calendar small" data-role="calendar"></div></div>
            <div class="span4"><div class="calendar small" data-role="calendar" data-start-mode="month"></div></div>
            <div class="span4"><div class="calendar small" data-role="calendar" data-start-mode="year"></div></div>
        </div>
    </div>
</div>
<div class="indent"></div>
<h2 class="fg-amber">DatePicker</h2>
<div class="example">

    <div class="grid fluid">
        <div class="row">
            <div class="span3">
                <div class="input-control text" data-role="datepicker">
                    <input type="text">
                    <button class="btn-date"></button>
                </div>
            </div>
            <div class="span3">
                <div class="input-control text" data-role="datepicker" data-date="2013-11-13" data-effect="slide">
                    <input type="text">
                    <button class="btn-date"></button>
                </div>
            </div>
            <div class="span6">
                <div class="input-control text" data-role="datepicker" data-date="2013-11-14" data-format="dddd, mmmm d, yyyy" data-effect="fade">
                    <input type="text">
                    <button class="btn-date"></button>
                </div>
            </div>
        </div>
    </div>

</div>
<div class="indent"></div>
<h2 class="fg-amber">Countdown</h2>
<div class="example">
    <div class="countdown" data-role="countdown" data-blink="false" style="font-size: 40px;"></div>
    <div class="countdown inverse" data-role="countdown"></div>
    <div class="countdown" data-role="countdown" data-style-background="bg-lightBlue"></div>
    <div class="countdown" data-role="countdown" data-style-background="bg-teal" data-style-foreground="fg-yellow"></div>
</div>

<div class="indent"></div>
<h2 class="fg-amber">Times</h2>
<div class="example">
    <div class="times" data-role="times"></div>
    <div class="times inverse" data-role="times" data-blink="false" style="font-size: 40px"></div>
    <div class="times" data-role="times" data-style-background="bg-lightBlue" data-style-divider="fg-lightBlue"></div>
    <div class="times" data-role="times" data-style-background="bg-red" data-style-foreground="fg-white" data-style-divider="fg-red"></div>
</div>
<div class="indent"></div>
<h2 class="fg-amber">Window</h2>
<div class="example">
    <div class="grid fluid">
        <div class="row no-margin">
            <div class="span4">
                <h3>Active window</h3>
                <div class="window">
                    <div class="caption">
                        <span class="icon icon-windows"></span>
                        <div class="title">Window caption</div>
                        <button class="btn-min"></button>
                        <button class="btn-max"></button>
                        <button class="btn-close"></button>
                    </div>
                    <div class="content">
                        Window content
                    </div>
                </div>
            </div>
            <div class="span4">
                <h3>Window with shadow</h3>
                <div class="window shadow">
                    <div class="caption">
                        <span class="icon icon-windows"></span>
                        <div class="title">Window caption</div>
                        <button class="btn-min"></button>
                        <button class="btn-max"></button>
                        <button class="btn-close"></button>
                    </div>
                    <div class="content">
                        Window content
                    </div>
                </div>
            </div>
            <div class="span4">
                <h3>Inactive window</h3>
                <div class="window inactive">
                    <div class="caption">
                        <span class="icon icon-windows"></span>
                        <div class="title">Window caption</div>
                        <button class="btn-min"></button>
                        <button class="btn-max"></button>
                        <button class="btn-close"></button>
                    </div>
                    <div class="content">
                        Window content
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="example">
    <div class="grid fluid">
        <div class="row">
            <div class="span6">
                <div class="window flat">
                    <div class="caption">
                        <span class="icon icon-windows"></span>
                        <div class="title">Window caption</div>
                        <button class="btn-min"></button>
                        <button class="btn-max"></button>
                        <button class="btn-close"></button>
                    </div>
                    <div class="content">
                        Window content
                    </div>
                </div>
            </div>
            <div class="span6">
                <div class="window flat shadow">
                    <div class="caption">
                        <span class="icon icon-windows"></span>
                        <div class="title">Window caption</div>
                        <button class="btn-min"></button>
                        <button class="btn-max"></button>
                        <button class="btn-close"></button>
                    </div>
                    <div class="content">
                        Window content
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="indent"></div>
<h2 class="fg-amber">Dialog</h2>
<div class="example">
    <button class="button" id="createWindow">Create Window</button>
    <button class="button" id="createFlatWindow">Create Flat Window</button>
    <button class="button" id="createWindowYoutube">Youtube Video</button>
    <button class="button" id="createWindowDraggable">Create Draggable Window</button>
</div>
<script>
    $(function(){
        $("#createWindow").on('click', function(){
            $.Dialog({
                shadow: true,
                overlay: false,
                icon: '<span class="icon-rocket"></span>',
                title: 'Title',
                width: 500,
                padding: 10,
                content: 'Window content here'
            });
        });
        $("#createWindowDraggable").on('click', function(){
            $.Dialog({
                shadow: true,
                overlay: false,
                draggable: true,
                icon: '<span class="icon-bus"></span>',
                title: 'Draggable window',
                width: 500,
                padding: 10,
                content: 'This Window is draggable by caption.'
            });
        });
        $("#createFlatWindow").on('click', function(){
            $.Dialog({
                overlay: true,
                shadow: true,
                flat: true,
                icon: '<img src="images/excel2013icon.png">',
                title: 'Flat window',
                content: '',
                onShow: function(_dialog){
                    var content = _dialog.children('.content');
                    content.html('Set content from event onShow');
                }
            });
        });
        $("#createWindowYoutube").on('click', function(){
            $.Dialog({
                overlay: false,
                shadow: true,
                flat: false,
                icon: '<img src="images/excel2013icon.png">',
                title: 'Window 8.1 Everywhere For Everything!',
                content: '',
                onShow: function(_dialog){
                    var html = [
                        '<iframe width="640" height="480" src="//www.youtube.com/embed/_24bgSxAD9Q" frameborder="0" allowfullscreen></iframe>'
                    ].join("");

                    $.Dialog.content(html);
                }
            });
        });
    })
</script>
<div class="indent"></div>
<h2 class="fg-amber">Notify</h2>
<div class="example">
    <button class="button primary" id="notify_btn_1">Notify</button>
    <button class="button success" id="notify_btn_2">Notify many</button>
    <script>
        $(function(){
            $('#notify_btn_1').on('click', function(){
                $.Notify({
                    shadow: false,
                    position: 'bottom-right',
                    content: "Metro UI CSS is awesome!!!"
                });
            });
            $('#notify_btn_2').on('click', function(){
                setTimeout(function(){
                    $.Notify({style: {background: '#1ba1e2', color: 'white'}, caption: 'Info...', content: "Metro UI CSS is Simple!!!"});
                }, 1000);
                setTimeout(function(){
                    $.Notify({style: {background: 'red', color: 'white'}, content: "Metro UI CSS is Sufficient!!!"});
                }, 2000);
                setTimeout(function(){
                    $.Notify({style: {background: 'green', color: 'white'}, content: "Metro UI CSS is Responsive!!!"});
                }, 3000);
                setTimeout(function(){
                    $.Notify({content: "Default style for notify"});
                }, 4000);
            });
        });
    </script>
</div>












    <div class="indent"></div>
    <div class="indent"></div>
    <div class="indent"></div>
</div>
</body>
</html>